ChartJS双Y轴柱状图问题：双Y轴均显示在左侧

核心问题 #

你的配置存在两个关键问题：

• 数据集未关联到对应的Y轴ID，导致ChartJS无法区分哪个系列对应哪个轴
• 若使用ChartJS v3+版本，轴的配置结构与v2完全不同，旧写法会导致配置失效

修复步骤 #

1. 为数据集绑定对应Y轴 #

在每个数据集中添加yAxisID，指定其归属的轴ID：

datasets: [
  {
    label: "销量",
    data: [/* 你的数据 */],
    yAxisID: "y-axis-1", // 绑定左侧轴
    backgroundColor: "rgba(255, 99, 132, 0.5)"
  },
  {
    label: "营收",
    data: [/* 你的数据 */],
    yAxisID: "y-axis-2", // 绑定右侧轴
    backgroundColor: "rgba(54, 162, 235, 0.5)"
  }
]

2. 适配ChartJS版本的轴配置 #

• 若使用ChartJS v2版本：保持yAxes数组写法，但必须确保数据集已绑定yAxisID：

options: {
  scales: {
    yAxes: [
      {
        id: "y-axis-1",
        position: "left",
        ticks: {
          maxTicksLimit: 5,
          callback: (value) => formatValue(value)/1000 + "K (units)",
        },
      },
      {
        id: "y-axis-2",
        position: "right",
        ticks: {
          maxTicksLimit: 5,
          callback: (value) => formatValue(value) + "M ($)",
        },
      }
    ]
  }
}

• 若使用ChartJS v3+版本：轴配置改为scales对象下的独立属性，不再使用数组：

options: {
  scales: {
    "y-axis-1": {
      position: "left",
      ticks: {
        maxTicksLimit: 5,
        callback: (value) => formatValue(value)/1000 + "K (units)",
      },
    },
    "y-axis-2": {
      position: "right",
      ticks: {
        maxTicksLimit: 5,
        callback: (value) => formatValue(value) + "M ($)",
      },
    }
  }
}

验证 #

完成上述修改后，两个Y轴会分别显示在图表的左侧和右侧，对应的数据系列会匹配各自的轴刻度。

内容的提问来源于stack exchange，提问作者Abdelouahed BEN MHAMED