Chart.js数据标签超出X轴求助：如何让标签始终在图表内

使用Chart.js搭配chartjs-plugin-datalabels和chartjs-plugin-zoom插件时，设置X轴初始展示0-15索引数据后，数据标签会超出X轴范围，同时需要实现缩放/平移时标签始终在图表区域内的需求，可按以下步骤修复：

1. 强制所有数据标签不超出画布 #

clamp: true是chartjs-plugin-datalabels的核心属性，能强制标签限制在图表画布范围内。目前仅第二个数据集设置了该属性，需给所有数据集补上，或者全局配置统一开启：

全局配置方式 #

options: {
  plugins: {
    datalabels: {
      clamp: true, // 全局生效，所有数据集标签都会被限制在画布内
    },
    // 原zoom插件配置保持不变
  },
  // 其他配置...
}

单个数据集配置方式 #

const dataSetList: any[] = [
  {
    data: data,
    datalabels: {
      align: 'end',
      anchor: 'start',
      display: true,
      clamp: true, // 新增这行
    },
  },
  {
    label: `...`,
    data: data,
    parsing: {
      yAxisKey: `...`,
    },
    datalabels: {
      anchor: 'end',
      align: 'start',
      clamp: true,
      display: true,
   },
  },
];

2. 调整X轴避免内容贴边 #

初始X轴的min:0和max:15会让内容紧贴边界，添加偏移和内边距给标签留出空间：

scales: {
  xAxis: {
    stacked: true,
    min: 0,
    max: 15,
    offset: true, // 让柱形/折线点不贴X轴两端
    padding: {
      left: 15,
      right: 15, // 左右留出空间放置标签
    },
  },
  // 原yAxis配置保持不变
}

3. 同步缩放平移后的标签位置 #

缩放或平移后，手动触发图表无动画更新，确保标签位置同步更新：

plugins: {
  zoom: {
    pan: {
      enabled: true,
      mode: 'x',
      threshold: 10,
      onPanComplete: ({chart}) => {
        chart.update('none'); // 无动画更新，避免闪烁
      }
    },
    zoom: {
      wheel: {
        enabled: true,
        speed: 0.3,
      },
      pinch: {
        enabled: true,
      },
      mode: 'x',
      onZoomComplete: ({chart}) => {
        chart.update('none');
      }
    },
  },
}

版本兼容性说明 #

当前使用的依赖版本组合（Chart.js v3.9.1 + datalabels v2.2.0 + zoom v2.0.0 + react-chartjs-2 v4.3.1）是兼容的，无需调整版本。

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