本文介绍在使用 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 插件：
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}"></line>
这样即可干净、可靠地移除所有数据点标签，让折线图回归简洁专业的呈现效果。
