react-chartjs-2折线图如何隐藏数据点上方的标签？

你之前设置的pointRadius: 0是用来隐藏折线图上的圆点标记，和折线上方的数值标签完全不相关；而坐标轴ticks.display: false只是控制坐标轴上的刻度文字，同样管不到这些标签。

这些数值标签是由chartjs-plugin-datalabels这个Chart.js第三方插件生成的——如果你的项目里安装了这个插件，或者react-chartjs-2的版本默认集成了它，就会自动显示这些标签，你之前的配置根本没触碰到这个插件的设置。

有两种简单的方式可以隐藏这些标签：

方式一：单独给当前图表禁用 #

只针对这个折线图关闭标签，不影响项目里的其他图表：

import { Line } from 'react-chartjs-2';

// 修改你的options配置，添加datalabels插件的禁用设置
const chartOptions = {
  plugins: {
    datalabels: {
      display: false // 直接关闭数据标签显示
    },
    // 你原来的legend等配置可以保留
    legend: {
      // ...
    }
  },
  // 你原来的scales配置也保留
  scales: {
    // ...
  }
};

// 然后在Line组件中传入这个配置
<Line data={yourChartData} options={chartOptions} />

方式二：全局禁用插件 #

如果整个项目都不需要这个数据标签功能，可以全局关闭：

import { Chart } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 先注册插件（如果之前没注册过也没关系），然后全局禁用
Chart.register(ChartDataLabels);
Chart.defaults.plugins.datalabels.display = false;

额外检查 #

可以看看项目的package.json里有没有chartjs-plugin-datalabels这个依赖，确认插件的存在。如果没安装却还是显示标签，大概率是react-chartjs-2的版本默认集成了它，用上面的配置依然能解决。

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