react-chartjs-2 自定义tooltip的callback回调不生效如何解决？

核心原因是配置层级与你使用的Chart.js版本不匹配：目前主流版本的react-chartjs-2（4.x及以上）对应Chart.js 3.x+，该版本调整了tooltip的配置规则，原来写在options根节点的tooltips配置已经废弃，需要嵌套到plugins节点下，同时配置项名改为单数tooltip。

正确配置示例 #

const options = {
  plugins: {
    tooltip: {
      callbacks: {
        label: (tooltipItem) => {
          // 3.x版本直接从tooltipItem中取值，不需要第二个data参数
          return tooltipItem.formattedValue + ' test';
        }
      }
    }
  }
}

常见注意事项 #

• 若你使用的是react-chartjs-2 3.x及以下版本（对应Chart.js 2.x），才可以使用原根节点tooltips的写法
• Chart.js 3.x的tooltip回调入参结构有调整，可直接通过tooltipItem.raw获取原始数值，tooltipItem.formattedValue获取格式化后的数值
• 注意配置项拼写为单数tooltip，复数tooltips是旧版本写法，新版不会生效

内容的提问来源于stack exchange，提问作者Đông Nguyễn Tấn