React Chart.js v4水平条形图100%长度条形自定义Tooltip不显示问题

问题背景 #

使用React Chart.js v4实现水平条形图，自定义外部Tooltip时遇到两个问题：

1. 最初配置interaction: 'y' as const，切换为单数据集后，hover条形空白区域会导致Tooltip崩溃
2. 改为interaction: { mode: 'index' as const, axis: 'y' as const }后崩溃问题解决，但占满100%长度的条形无法触发Tooltip

当前完整配置代码如下：

export const options = (
    xAxisTitle: string,
    yAxisTitle: string,
    spendLabel: string,
    balanceLabel: string,
    langIetf: string
) => ({
    animation: false as const,
    indexAxis: 'y' as const,
    responsive: true,
    aspectRatio: 2,
    scales: {
        x: {
            stacked: true,
            display: true,
            title: {
                display: true,
                text: xAxisTitle,
                font: {
                    weight: 'bold' as const
                }
            },
            ticks: {
                stepSize: 20,
                callback(value: any) {
                    return `${value}%`;
                }
            },
            min: 0,
            max: 100
        },
        y: {
            stacked: true,
            display: true,
            title: {
                display: true,
                text: yAxisTitle,
                font: {
                    weight: 'bold' as const
                }
            },
            ticks: {
                // For a category axis, the val is the index so the lookup via getLabelForValue is needed
                callback(value: any): string {
                    const newThis = this as any;
                    if (newThis.getLabelForValue(value).length > 10) {
                        return `${newThis.getLabelForValue(value).substring(0, 10)}...`;
                    }
                    return newThis.getLabelForValue(value);
                }
            },
            grid: {
                drawOnChartArea: false,
                drawTicks: false
            }
        }
    },
    interaction: {
        mode: 'index' as const,
        axis: 'xy' as const
    },
    plugins: {
        legend: {
            display: false
        },
        tooltip: {
            enabled: false,
            external(context: any) {
                const dir = document.querySelector('html')?.getAttribute('dir');
                const { tooltipEl, tooltipCaret } = generateTooltipElement();
                const { tooltip, chart } = context;

                // Hide if no tooltip
                if (tooltip.opacity === 0) {
                    hideTooltip(tooltipEl, tooltipCaret);
                    return;
                }

                const labelArr: string[] = [spendLabel, balanceLabel, xAxisTitle];
                // Set HTML & Data
                if (tooltip.body) {
                    const innerHtml = setTooltipBody(tooltip, chart, labelArr, langIetf, dir!);
                    tooltipEl!.querySelector('table')!.innerHTML = innerHtml;
                }
                if (tooltipEl !== null && tooltipCaret !== null) {
                    setTooltipStyles(tooltip, tooltipEl, tooltipCaret, chart);
                }
            }
        }
    }
});

现有配置合理性分析 #

当前配置存在几个可优化点：

1. stacked配置冗余：单数据集场景下，x轴和y轴的stacked: true属于多余配置，堆叠逻辑会干扰Chart.js对数据元素的交互判定
2. interaction模式选择不当：index模式下，Chart.js会尝试匹配整个索引的所有数据集，但单数据集时，若条形占满100%宽度，可能因边界检测问题（比如hover点刚好落在轴的边缘）无法触发交互
3. tooltip外部渲染容错不足：仅处理了tooltip.opacity === 0的情况，未对tooltip.body或DOM元素为空的场景做兜底，可能隐藏潜在问题

优化解决方案 #

方案1：调整交互配置（推荐） #

修改interaction配置，切换为nearest模式并结合intersect: false，确保hover到y轴对应行的任何区域都能触发Tooltip，同时避免空白区域崩溃：

interaction: {
    mode: 'nearest' as const,
    axis: 'y' as const,
    intersect: false
}

• nearest模式优先检测最近的数据元素，适配单数据集场景
• intersect: false允许hover到y轴对应行的任意位置（包括条形外的空白区域）触发Tooltip，同时不会导致崩溃
• 保留axis: 'y'确保只在y轴维度触发交互，符合水平条形图的使用习惯

方案2：移除冗余的stacked配置 #

单数据集场景下，将x轴和y轴的stacked: true改为false，减少堆叠逻辑对交互判定的干扰：

scales: {
    x: {
        stacked: false, // 改为false
        // 其他配置不变
    },
    y: {
        stacked: false, // 改为false
        // 其他配置不变
    }
}

方案3：给100%长度的条形添加微小边框（兜底方案） #

如果上述方案仍无法解决边界检测问题，可以给数据集添加透明边框，扩大交互检测区域：

// 在你的数据集配置中添加
data: [...],
borderWidth: 1,
borderColor: 'rgba(0,0,0,0)' // 透明边框，不影响视觉但扩大检测范围

方案4：优化外部Tooltip的容错逻辑 #

在外部Tooltip渲染函数中添加更多兜底判断，避免因tooltip.body或DOM元素为空导致的问题：

external(context: any) {
    const dir = document.querySelector('html')?.getAttribute('dir');
    const { tooltipEl, tooltipCaret } = generateTooltipElement();
    const { tooltip, chart } = context;

    // 额外添加兜底判断
    if (!tooltipEl || !tooltipCaret || !tooltip || !chart) {
        hideTooltip(tooltipEl, tooltipCaret);
        return;
    }

    if (tooltip.opacity === 0) {
        hideTooltip(tooltipEl, tooltipCaret);
        return;
    }

    const labelArr: string[] = [spendLabel, balanceLabel, xAxisTitle];
    if (tooltip.body) {
        const innerHtml = setTooltipBody(tooltip, chart, labelArr, langIetf, dir ?? 'ltr'); // 给dir加默认值
        const tableEl = tooltipEl.querySelector('table');
        if (tableEl) tableEl.innerHTML = innerHtml;
    }

    setTooltipStyles(tooltip, tooltipEl, tooltipCaret, chart);
}

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