react-chartjs-2柱状图如何自定义悬停时的tooltip提示内容

react-chartjs-2 是对 Chart.js 的 React 封装，所有 Tooltip 自定义逻辑统一收拢在 options.plugins.tooltip 配置项下，不存在挂载在单个 dataset 上的 tooltip 配置，这套配置对所有 Chart.js 支持的图表类型通用。

核心配置能力 #

通过 callbacks 字段可以完全控制 Tooltip 每一块的展示内容，常用回调如下：

• title：控制 Tooltip 顶部标题行，入参是当前悬停位置命中的所有数据项数组，返回字符串即为标题内容，返回空值可隐藏标题
• label：控制每个数据项对应的内容行，入参是单个数据项的上下文对象，返回字符串即为该行内容，不需要的内容直接过滤即可
• footer：控制 Tooltip 底部脚注行，无需求可以不配置
• 若需要完全自定义 Tooltip 的DOM结构、样式、交互，可使用 external 回调接管整个 Tooltip 的渲染逻辑，适配复杂排版场景。

对应业务场景的实现 #

针对需求里的时间戳格式化、百分比展示、隐藏数据集label的要求，直接修改配置即可，顺带修正原代码里Chart.js v3+版本Y轴键名写错的问题（v3+版本Y轴配置键名为y，旧版v2的yAxes写法会导致配置失效）。

修改后的完整配置代码：

function timestamp(year: number, month: number, day: number, hour: number, minute: number) {
    return new Date(year, month - 1, day, hour, minute).valueOf();
}

export const TimeGraph: React.FC = () => {
    const data = [
        { x: timestamp(2022, 1, 1, 1, 15), y: 1 },
        { x: timestamp(2022, 1, 1, 1, 30), y: 2 },
        { x: timestamp(2022, 1, 1, 1, 45), y: 3 },
        { x: timestamp(2022, 1, 1, 2, 0), y: 4 },
        { x: timestamp(2022, 1, 1, 2, 15), y: 2 },
    ];

    const xValues = data.map(item => item.x);
    const yValues = data.map(item => item.y);

    const options = {
        scales: {
            x: {
                grid: { display: false },
                ticks: {
                    callback: (index: number) => {
                        const date = new Date(xValues[index]);
                        return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
                    },
                },
            },
            // 修正：Chart.js v3+ Y轴配置键名为y，原yAxes为v2旧写法
            y: {
                grid: { display: false },
                ticks: {
                    callback: (value: number) => `${value} %`,
                },
            },
        },
        plugins: {
            legend: { position: 'top' as const },
            title: { display: false },
            // Tooltip自定义核心配置
            tooltip: {
                // 可选：隐藏label前的数据集颜色小方块
                displayColors: false,
                callbacks: {
                    // 标题行：格式化时间戳为时分格式
                    title: (tooltipItems: Array<{label: string}>) => {
                        const date = new Date(Number(tooltipItems[0].label));
                        return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
                    },
                    // 内容行：只展示格式化后的百分比，不显示数据集label
                    label: (context: {parsed: {y: number}}) => `${context.parsed.y}%`,
                }
            }
        },
    };

    const chartData = {
        labels: xValues,
        datasets: [
            {
                label: '占位label，不会在tooltip中展示',
                data: yValues,
                backgroundColor: 'rgba(53, 162, 235, 0.5)',
            },
        ],
    };

    return <Bar options={options} data={chartData} height={150} />;
};

通用扩展说明 #

• 回调入参自带 datasetIndex、dataIndex 字段，可以直接索引到原始业务数据做任意格式化，不需要和轴刻度的格式化规则保持一致
• 多数据集场景下，label 回调会为每个数据集单独执行，可分别定制每个数据集在tooltip中的展示格式
• 若需要给Tooltip加额外信息（比如数据阈值说明、同环比差值），直接在label回调返回的字符串里拼接即可，也可返回字符串数组渲染多行内容

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