React TypeScript中react-chartjs-2自定义Y轴配置问题求助

问题说明 #

在React TypeScript环境使用react-chartjs-2时，想要将Y轴数值（如1）转换为自定义字符串（如“Apple”），但scales配置始终无效，同时对Y轴配置时使用[]、"y"、"yAxis"还是"yAxes"存在困惑。

原代码示例 #

const opt = {
    plugins: {
        legend: {
            display: false,
            labels: {
                color: 'rgb(255, 99, 132)'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    min: 0,
                    stepSize: 2,
                    callback: function(value : any) {
                        return `${value}`
                    }
                }
            }]           
        }
    }
}

return (
    <div>
        <Bar
            data={state}
            options={opt}
        />
    </div>
)

核心问题分析 #

• 配置结构错误：你把scales放在了plugins对象内部，正确的位置是和plugins同级。
• Y轴配置键版本差异：
  • Chart.js v2版本使用yAxes数组配置多轴
  • Chart.js v3+版本（react-chartjs-2 v4+对应此版本）使用scales.y（单轴场景）或scales.y[轴ID]（多轴场景），不再使用yAxes

修正后的代码示例 #

import { Bar } from 'react-chartjs-2';
import { ChartOptions } from 'chart.js';

// 定义数值到自定义文本的映射
const valueMap: Record<number, string> = {
  1: 'Apple',
  3: 'Banana',
  5: 'Orange'
};

const opt: ChartOptions<'bar'> = {
    plugins: {
        legend: {
            display: false,
            labels: {
                color: 'rgb(255, 99, 132)'
            }
        }
    },
    // scales和plugins同级
    scales: {
        y: { // v3+版本使用y作为单轴配置键
            beginAtZero: false,
            min: 0,
            stepSize: 2,
            ticks: {
                callback: function(value: number) {
                    // 根据映射返回自定义文本，无匹配则返回原数值
                    return valueMap[value] ?? value;
                }
            }
        }
    }
}

return (
    <div>
        <Bar
            data={state}
            options={opt}
        />
    </div>
)

关键说明 #

• 配置层级：确保scales与plugins处于同一层级，而非嵌套在plugins内
• 版本适配：react-chartjs-2 v4+对应Chart.js v3+，使用scales.y配置单Y轴；若使用旧版v3及以下（对应Chart.js v2），则使用scales.yAxes: [{ ... }]
• TypeScript类型：通过ChartOptions<'bar'>获得完整的类型提示，避免配置错误
• 自定义映射：通过ticks.callback方法实现数值到自定义字符串的转换，可根据需求扩展映射规则

内容的提问来源于stack exchange，提问作者Samuel Wang