Chart.js v3 自定义tooltip回调时标签颜色方块仅单系列显示问题

问题原因 #

你在自定义Chart.js v3的tooltip回调时，直接返回了纯文本字符串作为标签内容，没有携带每个数据集对应的样式属性，Chart.js无法获取到其余系列的颜色配置，因此不会生成对应的颜色标识方块，仅默认保留了第一个系列的颜色标识。

解决方法 #

修改tooltip的label回调逻辑，不要直接返回文本字符串，而是返回包含样式配置的对象，显式传递对应数据集的颜色参数即可，参考写法如下：

const options = {
  plugins: {
    tooltip: {
      callbacks: {
        label: (context) => {
          const dataset = context.dataset;
          // 此处写入你原本的自定义逻辑，比如判断是否需要隐藏当前系列的提示
          if (/* 你的隐藏判定条件 */) {
            return null;
          }
          // 返回带样式配置的对象
          return {
            // 自定义的标签文本内容
            label: `${dataset.label}: ${context.parsed.y}`,
            // 传入数据集的颜色配置，用于渲染左侧颜色方块
            backgroundColor: dataset.backgroundColor,
            borderColor: dataset.borderColor,
            borderWidth: dataset.borderWidth ?? 1
          }
        }
      }
    }
  }
}

如果不需要修改颜色方块的默认样式，直接复用对应dataset里已配置的颜色参数即可，不需要额外自定义值。

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