如何移除react-chartjs-2 Line组件中的数据点标签？

要移除折线图数据点上的数值标签，直接在图表配置的plugins中添加datalabels配置并设置display: false即可，具体修改如下：

修改后的图表配置选项：

const chartOptions: DeepPartial<
  CoreChartOptions<"line"> &
    ElementChartOptions<"line"> &
    PluginChartOptions<"line"> &
    DatasetChartOptions<"line"> &
    ScaleChartOptions<"line"> &
    LineControllerChartOptions
> = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: false,
    },
    // 关闭数据点标签显示
    datalabels: {
      display: false
    }
  },
  elements: {
    point: {
      radius: 2,
    },
  },
};

说明 #

Chart.js 默认不会显示数据点标签，出现这个问题通常是因为项目中引入了chartjs-plugin-datalabels插件并默认启用了标签显示。通过上述配置可以全局关闭所有数据点的标签，如果你只想关闭特定数据集的标签，也可以在对应数据集里添加datalabels: { display: false }。

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