[Chartjs]-How to use two Y axes in Chart.js v2?

by

236👍

✅

For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?),

  • The yAxes field needs to be in a scales object
  • the yAxis is referenced by id not name.
  • For the scale steps/size you just need to wrap these options in a ticks object.
  • No need forscalePositionLeft this is covered by position

Example:

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});

fiddle example

41👍

The accepted answer no longer works as of 3.5, and the cause is listed as part of the breaking changes for 3.X (See 3.x Migration Guide)

The updated code below changes the scales property, from scales: {yScales: [...]} to scales: {[id]: {[options]}} , and also adds fill: true, (Was changed at 3.X from defaulting to true) and tension: 0.4 (The example provided before does have smooth curves, and seems like it was an undocumented "breaking" change)

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'line',
    data: {
        labels: ['1', '2', '3', '4', '5'],
        datasets: [{
            label: 'A',
            yAxisID: 'A',
            data: [100, 96, 84, 76, 69],
            fill: true,
            tension: 0.4
        }, {
            label: 'B',
            yAxisID: 'B',
            data: [1, 1, 1, 1, 0],
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        scales: {
            A: {
                type: 'linear',
                position: 'left',
            },
            B: {
                type: 'linear',
                position: 'right',
                ticks: {
                    max: 1,
                    min: 0
                }
            }
        }
    }
});

0👍

This solution is working in react.

// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"


const lineChartData = {
  data: {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
      {
        label: '# of Votes',
        data: [19, 9, 2, 1, 1, 21],
        fill: false,
        backgroundColor: 'rgb(122, 99, 255)',
        borderColor: 'rgba(102, 99, 255, 0.2)',
      }
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }
}


<Line 
   data={lineChartData.data} 
   options={lineChartData.options} 
   height={30} 
   width={80} 
   options={{ maintainAspectRatio: true }} 
/>

Leave a comment