Chart.js堆叠折线图：如何让右侧Y轴与左侧刻度一致

要实现左右Y轴刻度完全同步，核心是强制右侧Y轴复用左侧Y轴的刻度范围（最小值、最大值），而非让它自动计算自身数据集的范围。具体操作如下：

关键配置修改 #

1. 移除右侧Y轴无效的stacked: true：stacked是控制数据堆叠的配置，仅对参与堆叠的左侧Y轴生效，右侧轴设置该属性无意义，直接删除即可。
2. 绑定右侧Y轴刻度范围到左侧轴：在右侧Y轴配置中，通过函数动态获取左侧轴的min和max值，确保两者刻度区间完全一致。同时可同步刻度格式化逻辑，保证显示效果统一。

示例代码片段：

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        label: '左侧堆叠数据1',
        data: [...],
        yAxisID: 'y',
        stack: 'stack1'
      },
      {
        label: '右侧数据',
        data: [...],
        yAxisID: 'y1'
      }
    ]
  },
  options: {
    scales: {
      y: {
        stacked: true, // 左侧轴开启堆叠，这才是控制堆叠的正确位置
        ticks: {
          callback: (value) => value.toLocaleString() // 左侧轴刻度格式化示例
        }
      },
      y1: {
        position: 'right',
        // 强制右侧轴使用左侧轴的刻度范围
        min: (context) => context.chart.scales.y.min,
        max: (context) => context.chart.scales.y.max,
        ticks: {
          callback: (value) => value.toLocaleString() // 和左侧轴同步格式化逻辑
        },
        grid: {
          display: false // 可选，隐藏右侧轴网格线避免重叠
        }
      }
    }
  }
});

原理说明 #

Chart.js默认会根据每个轴对应数据集的数值范围自动计算刻度，右侧轴因对应数据集范围与左侧堆叠后的数据范围差异较大（如你案例中的0-1 vs 0-6000），导致刻度不同步。通过动态绑定右侧轴的min和max到左侧轴，可强制它使用与左侧完全一致的刻度区间，无论数据如何动态变化，都会自动同步。

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