Apex Charts Tooltip无法显示自定义time字段值问题

问题原因 #

你的tooltip formatter函数参数使用错误：tooltip.y.formatter的第一个参数是当前数据点的y轴数值，而非包含seriesIndex和dataPointIndex的上下文对象。直接用val.seriesIndex会得到undefined，导致无法正确读取time数组中的值，最终显示空值。

修复后的代码 #

export const DeveloperSizing = () => {
    const data = {
        series: [{
            name: 'Size:Xs',
            data: [44, 55, 41, 80, 10, 44, 22],
            time: [3, 4, 5, 6, 7, 8, 12]
        }],

        options: {
            xaxis: {
                title: {
                    text: "Tickets"
                },
                categories: ["12/01/23 - 12/03/23", "12/01/23 - 12/03/23", "12/01/23 - 12/03/23", "12/01/23 - 12/03/23", "12/01/23 - 12/03/23", "12/01/23 - 12/03/23", "All"],
                labels: {
                    formatter: function (val) {
                        return val
                    }
                }
            },
            yaxis: {
                title: {
                    text: "Sprints",
                    offset: '0px'
                },
            },
            tooltip: {
                y: {
                    // 修改formatter，接收第二个参数context获取索引信息
                    formatter: function (yVal, context) {
                        return "Time: " + data.series[context.seriesIndex].time[context.dataPointIndex] + " days";
                    }
                }
            },
            fill: {
                opacity: 1
            },
            legend: {
                position: 'top',
                horizontalAlign: 'center',
                offsetX: 40
            }
        }
    }

    return (
        <React.Fragment>
            <ReactApexChart
                options={data.options}
                series={data.series}
                type='bar'
                height={400}
                className='apex-charts'
            />
        </React.Fragment>
    );
};

关键修改点 #

• 将tooltip.y.formatter的函数参数改为(yVal, context)，其中context对象包含当前数据点的seriesIndex（系列索引）和dataPointIndex（数据点索引）
• 通过context.seriesIndex和context.dataPointIndex定位到time数组中对应的数值，确保tooltip能正确显示天数

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