ChartJS v3.X 截断X轴标签长度且保留tooltip完整显示文本

几种写法失效、报错的核心原因共两点：

• v3版本对category轴的配置路径、ticks.callback回调函数的参数做了破坏性变更，直接照搬v2的回调逻辑拿不到正确的标签值
• 直接覆写chart.scales.x.ticks数组会破坏Chart内部绑定的*$context*代理对象，触发上下文报错

单图表配置方案（推荐，无副作用） #

直接在柱状图实例的配置项中添加ticks回调即可，这个回调的返回值仅会修改画布上渲染的X轴标签文本，Tooltip默认读取原始标签数据，不会被截断，完全匹配需求：

new Chart(canvasDom, {
  type: 'bar',
  data: {
    // 原有labels、datasets配置无需修改
    labels: [],
    datasets: []
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(tickValue) {
            const maxLen = 12
            const label = String(tickValue ?? '')
            return label.length >= maxLen 
              ? label.substring(0, maxLen - 1).trim() + '...' 
              : label
          }
        }
      },
      // 原有y轴、其他配置无需修改
      y: {}
    }
  }
})

全局配置写法（对应v2版本updateScaleDefaults效果） #

如果需要所有使用category轴的图表默认生效，直接修改v3提供的默认配置路径即可，之前配置不生效是因为回调参数没有适配v3规则：

// 全局配置所有category轴的标签截断规则
Chart.defaults.scales.category.ticks.callback = function(tickValue) {
  const maxLen = 12
  const label = String(tickValue ?? '')
  return label.length >= maxLen 
    ? label.substring(0, maxLen - 1).trim() + '...' 
    : label
}

自定义插件报错说明 #

v3内部所有刻度、元素对象都绑定了响应式的*$context*代理，直接用map返回新数组替换ticks属性会丢失上下文绑定，必然报错。如果一定要用插件实现，只能逐个修改原有tick对象的label属性，不能替换整个数组，但这种方式性能和兼容性远不如官方提供的ticks回调方案，不推荐使用。

注意：不需要额外修改Tooltip配置，上述写法不会改动原始数据源，悬浮时Tooltip会自动展示完整的原始标签文本。

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