Multi-axis line chart with Chart.js

by

1👍

✅

Within the chart options of your code, there are too many definitions of yAxes (before and after xAxis).

To make it work, the entire chart options can basically be reduced to what you see below.

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    yAxes: [{
        type: 'linear',
        position: 'left',
        id: 'y1',
      },
      {
        type: 'linear',
        position: 'right',
        gridLines: {
          drawOnChartArea: false
        },
        id: 'y2',
      }
    ]
  }
}

For further information, please consult Create Multiple Axis from the
Chart.js documentation.

Leave a comment