ChartJS折线图分类X轴与柱状图轴行为统一配置问询

问题核心是ChartJS会根据当前显示的图表类型自动调整分类X轴的offset属性：仅显示折线图时offset默认关闭，导致刻度对齐轴的两端；存在柱状图时offset自动开启，刻度居中显示。要统一行为，只需强制开启X轴的offset属性即可。

具体配置步骤 #

在图表的options中，为X轴添加强制offset: true的配置，同时配合grid.offset确保网格线位置同步：

const chart = new Chart(ctx, {
  data: {
    labels: ['分类1', '分类2', '分类3', '分类4'],
    datasets: [
      {
        label: '折线数据集',
        type: 'line',
        data: [10, 20, 15, 25],
        fill: false
      },
      {
        label: '柱状数据集',
        type: 'bar',
        data: [12, 18, 16, 22]
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'category',
        offset: true, // 强制开启偏移，固定刻度位置
        grid: {
          offset: true // 确保网格线与刻度位置同步
        }
      }
    },
    plugins: {
      legend: {
        onClick: (e, legendItem) => {
          // 保留默认数据集切换逻辑
          const index = legendItem.datasetIndex;
          const dataset = chart.data.datasets[index];
          dataset.hidden = !dataset.hidden;
          chart.update();
        }
      }
    }
  }
});

原理说明 #

• offset: true会让分类X轴的第一个和最后一个刻度与轴边缘保持间隙，强制刻度位置始终处于分类区间的中心，和柱状图显示时的布局一致。
• 该配置对折线图和柱状图同时生效，切换数据集时不会再出现刻度位置跳变的情况。

内容的提问来源于stack exchange，提问作者mabe.berlin