本文介绍在使用 react-chartjs-2 的 Line 组件时，通过配置 datalabels 插件彻底隐藏折线图上各数据点的数值标签（如坐标值），避免干扰视觉焦点，提升图表专业性与可读性。

本文介绍在使用 react-chartjs-2 的 line 组件时，通过配置 `datalabels` 插件彻底隐藏折线图上各数据点的数值标签（如坐标值），避免干扰视觉焦点，提升图表专业性与可读性。

在 react-chartjs-2 中，数据点上的标签（即每个数据点旁显示的具体数值）默认是禁用的——但一旦你安装并注册了 chartjs-plugin-datalabels 插件，它会自动启用并显示标签，这常导致意外出现的数字覆盖在折线上（如问题截图所示）。

要彻底关闭这些标签，关键在于 Chart.js 的插件配置层，而非 elements.point 或 dataset 层的样式设置。即使你已将 pointRadius 设为 0 或 1，只要 datalabels 插件处于激活状态且未显式禁用，标签仍可能渲染。

✅ 正确做法是在 options.plugins 中明确配置 datalabels 插件：

Wjs Reframing Video

用于在保持宽高比倒置的情况下，将视频从横向转换为纵向或反之（例如 16:9 ↔ 9:16，4:3 ↔ 3:4 等）

下载

const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: false,
    },
    // ? 关键：禁用 datalabels 插件
    datalabels: {
      display: false,
    },
  },
  elements: {
    point: {
      radius: 2, // 控制点大小，不影响标签显示
    },
  },
};

⚠️ 注意事项：

• 若项目中未安装 chartjs-plugin-datalabels，则无需此配置，标签本就不会出现；
• 若已安装该插件（常见于全局注册或按需导入），必须显式设置 display: false，否则插件默认行为可能启用标签；
• 不要尝试通过 dataset.pointStyle: 'circle' 或 pointRadius: 0 来“隐藏标签”——这些仅影响点本身，对标签无效；
• 使用 TypeScript 时，建议安装类型定义：@types/chartjs-plugin-datalabels，以获得更好的类型提示。

最后，请确认你的 Line 组件已正确传入 options 和 data：

<Line data={chartData} options={chartOptions} />

这样即可干净、可靠地移除所有数据点标签，让折线图回归简洁专业的呈现效果。