如何在Chart.js图表悬停时同时展示两个数据集的值作为标签

你配置不生效的核心原因是版本语法兼容问题：直接把tooltips配置放在options根层级是Chart.js V2版本的写法，V3及以上版本中，tooltip相关配置已经迁移到options.plugins.tooltip层级下。

可按照你使用的版本选择对应配置：

• 如果你使用V3/V4版本，完整配置如下：

options: {
  plugins: {
    tooltip: {
      mode: 'index',
      intersect: false,
      callbacks: {
        // 自定义提示标签格式，实现28 (30)的展示效果
        label: function(context) {
          const dataset1Val = context.chart.data.datasets[0].data[context.dataIndex]
          const dataset2Val = context.chart.data.datasets[1].data[context.dataIndex]
          return `${dataset1Val} (${dataset2Val})`
        }
      }
    }
  },
  hover: {
    mode: 'index',
    intersect: false
  }
}

• 如果你使用V2版本，完整配置如下：

options: {
  tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      label: function(tooltipItem, data) {
        const dataset1Val = data.datasets[0].data[tooltipItem.index]
        const dataset2Val = data.datasets[1].data[tooltipItem.index]
        return `${dataset1Val} (${dataset2Val})`
      }
    }
  },
  hover: {
    mode: 'index',
    intersect: false
  }
}

如果需要保留数据集的名称前缀，只需要在回调拼接字符串时加上对应数据集的label属性即可。

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