从ChartJS v2迁移至v3后无法访问默认配置 配置失效如何解决

核心原因 #

Chart.js v3对模块导出结构、全局配置的挂载路径做了不兼容的Breaking Change，原有v2的全局配置写法完全无法适配v3版本。

无法访问默认导出对象的解决方法 #

v3的ESM模块不再将全局配置挂载在Chart默认导出对象上，需要单独导入defaults对象操作全局配置：

// v2 写法
import Chart from 'chart.js'
Chart.defaults.global.defaultFontSize = 14

// v3 写法
import { Chart, defaults } from 'chart.js'
defaults.font.size = 14

如果是用CDN的UMD格式引入，依然可以通过全局对象访问：

// CDN引入时v3写法
window.Chart.defaults.font.size = 14

配置修改不生效的排查方案 #

• 必须在实例化Chart对象前修改全局配置，已创建的Chart实例不会响应后续的全局配置变更，也不要直接修改已有实例的config属性做全局配置
• v3去掉了原有的global配置层级，所有原来Chart.defaults.global.xxx的配置，都要改成defaults.xxx，例如原Chart.defaults.global.tooltips.enabled对应v3的defaults.plugins.tooltip.enabled
• 如果你使用了按需导入的Tree Shaking方案，需要确保修改配置对应的插件/组件已经完成注册，否则配置不会生效
• 部分配置项命名发生变更，例如原来的复数tooltips改为单数tooltip，scales下的类目配置路径也有调整，需要对应核对配置项的新路径

迁移示例 #

假设你v2版本的全局配置逻辑如下：

Chart.defaults.global.animation = false
Chart.defaults.global.legend.position = 'bottom'

对应v3的写法为：

defaults.animation = false
defaults.plugins.legend.position = 'bottom'

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