Chart.js多轴组合图问题：折线图数据点未与柱状图对齐

使用Chart.js 4.4.0绘制组合图，包含两组数据：一组为当年的柱状图+折线图，另一组为上年的柱状图+折线图。图表配置包含默认X轴、左侧Y轴，以及右侧平行Y轴（Z轴）适配另一数据刻度。当前折线图的数据点未与对应柱状图对齐，需要实现数据点与柱状图中心精准对齐的效果。

当前图表配置代码 #

{
  indexAxis: 'x',
  maxBarThickness: 32,
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      title: {
        display: true,
        text: 'Dummy Title'
      }
    },
    y: {
      beginAtZero: true,
      type: 'linear',
      position: 'left',
      title: {
        display: true,
        text: 'Y axis title'
      },
      ticks: {
        callback: (value: any) => 'Callback for ticks formatting'
      }
    },
    z: {
      beginAtZero: true,
      type: 'linear',
      position: 'right',
      grid: {
        drawOnChartArea: false
      },
      title: { 
           display: true, 
           text: 'Z axis title'
      }
    }
  },
  interaction: {
    mode: 'index',
    intersect: false
  },
  layout: {
    padding: {
      bottom: 15
    }
  },
  plugins: {
    tooltip: {
      enabled: true
      }
    }
  }
};

效果说明 #

• 实际效果：折线图的数据点未与对应柱状图的中心对齐
• 期望效果：折线图的数据点精准对应到每组柱状图的中心位置

关键配置修改 #

为每个折线图系列添加offset: true属性，让折线点跟随柱状图的偏移规则，实现对齐：

// 示例折线系列配置（需添加到你的data.datasets数组中）
{
  type: 'line',
  xAxisID: 'x', // 确保与柱状图使用同一X轴
  yAxisID: 'y', // 或对应Z轴，根据数据刻度选择
  offset: true, // 核心配置，实现与柱状图对齐
  data: [/* 你的折线数据 */],
  // 其他样式配置（如颜色、点大小等）
}

辅助检查 #

确保X轴的offset属性为true（分组柱状图默认开启，若手动修改过需恢复）：

scales: {
  x: {
    offset: true, // 保持此配置为true，确保柱状图分组偏移正常
    title: {
      display: true,
      text: 'Dummy Title'
    }
  },
  // 其他轴配置...
}

原理说明 #

Chart.js中，分组柱状图通过X轴的offset属性让柱子偏离刻度线，形成分组间距；而折线图默认对齐X轴刻度线。给折线系列添加offset: true后，折线点会采用与柱状图相同的偏移计算，从而精准对齐到柱状图中心。

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