Multi-axis Line Chart With Chart.js

The following code I tried to display two y-axis on the line chart and I added yAxisID in both the data source. However, it is nothing to shown. May I know what's wrong with my cod

Solution 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.