如何通过Chart.defaults.global修改Chart.js数据点标签颜色

你修改核心库默认配置不生效的核心原因：数据点旁显示的灰色数值标签不是ChartJS核心库自带的渲染元素，是第三方数据标签插件（绝大多数场景用的是chartjs-plugin-datalabels）生成的，核心库的字体、网格线配置不会作用到插件渲染的元素上。

针对你无法获取图表实例、只能修改全局配置的场景，直接在现有全局配置代码里追加插件对应的全局默认项即可，不需要修改业务源码、不需要重渲染图表：

// 你之前已经配置的核心库全局项
Chart.defaults.global.defaultFontColor = '#fff';
Chart.defaults.global.defaultColor = '#fff';
Chart.defaults.global.scale.gridLines.color = '#fff';
Chart.defaults.global.scale.gridLines.zeroLineColor = '#fff';

// 追加以下配置，全局修改数据标签颜色为白色
Chart.defaults.global.plugins.datalabels.color = '#fff';

配置注意事项 #

• 请确保这段全局配置代码的执行顺序：在ChartJS和datalabels插件加载完成之后，在客户软件的图表初始化逻辑之前运行，配置就会自动被所有初始化的图表读取生效。
• 如果配置后没有生效，可以打开Chrome开发者工具选中那个灰色的100%标签元素，查看DOM的class属性：如果类名包含datalabel字段，说明就是上述插件，检查代码执行顺序即可；如果是客户软件自研的自定义标签渲染逻辑，可以通过全局注入afterDraw钩子强制覆写标签绘制颜色：

Chart.plugins.register({
  afterDraw: function(chart) {
    const ctx = chart.ctx;
    ctx.fillStyle = '#fff';
  }
});

• 网上常见的「获取实例改配置重渲染」方案需要拿到图表初始化时返回的实例对象，你没有源码权限的场景下这个方案完全不适用，不需要再尝试。

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