react-chartjs-2 工具提示回调不起作用

Question

我正在使用react-chartjs-2库在React中制作简单的图表。我尝试通过添加标题来自定义工具提示：

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        return tooltipItem?.value + ' test';
      }
    }
  }

代码沙箱：https://codesandbox.io/s/zealous-mestorf-ste8u
尽管我遵循了 Chart.js 示例以及许多其他自定义工具提示示例（即此问题的答案：React-chartjs-2：饼图工具提示百分比），但该代码不起作用 ).

Answer 1

您在使用 v3 时使用 v2 语法，因此选项名称和位置错误，而且您的比例配置也错误，它应该如下所示：

const option = {
  plugins: {
    tooltip: {
      callbacks: {
        title: function () {
          return "my tittle";
        }
      }
    },
    legend: { display: false },
    title: {
      display: true,
      text: "Test chart",
      position: "top"
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

有关 v2 和 v3 之间更改的更多信息，请查看 迁移指南

Answer 2

如果默认工具提示不起作用，请尝试像这样注册它

ChartJS.register（工具提示）。