Chart.js v3如何配置允许x轴刻度标签溢出而不压缩绘图区域？

解决方案 #

要恢复Chart.js v2版本允许刻度标签溢出画布的旧行为，只需在你现有的x轴配置中新增2项配置即可：

• 将x轴根配置的bounds属性设置为'data'：该属性默认值为ticks，会自动调整轴的边界来完整容纳所有刻度标签，改为'data'后轴的边界会严格遵循你设定的min和max，不会为了适配边缘刻度额外扩展留白。
• 在ticks配置中新增clip: false：该属性默认值为true，会自动裁剪超出绘图区域的刻度内容，改为false后允许标签溢出画布显示，和v2的默认行为完全一致。

修改后的完整x轴配置如下：

{
  type: 'time',
  axis: 'x',
  min: minDate.getTime(),
  max: maxDate.getTime(),
  bounds: 'data', // 轴边界严格按数据min/max计算，不会为刻度额外留白
  time: {},
  ticks: {
    minRotation: 45,
    maxRotation: 45,
    source: 'labels',
    clip: false // 允许刻度标签溢出画布范围
  }
};

如果调整后仍存在轻微左侧空白，可在x轴根配置中显式添加offset: false，关闭轴的默认左右偏移即可。

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