How to use two Y axes in Chart.js v2?

Question

I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.

This is my code (jsfiddle):

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

However, the second axis is not visible and the second dataset is still scaled exactly as the first (0 to 100 instead of 0 to 1). What do I need to change?

Quince · Accepted Answer · 2018-11-26 09:45:43Z

241

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

edited Nov 26, 2018 at 9:45

answered Jun 29, 2016 at 8:26

Quince

15k6 gold badges63 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

just.me Over a year ago

When I open your fiddle, both axes are there, but the second dataset (B) is still not scaled to the right axis (B), why not?

Quince Over a year ago

sorry typo on my part should be yAxisID not yAxesID

Quince Over a year ago

@Bcktr im sure you can just change the type to a bar. (or are you showing a bar and a line in the same graph? ) Not near a computer at the moment but I feel that should work.

sparkle Over a year ago

Do you know how to set ticks (min/max) automatically by data? It works for left-axis, by default right-axis is 0-1

Juanjo Martinez Over a year ago

This is no longer working as of Chart.js 3.5 and, and is listed as part of the breaking changes for 3.0. See below for an updated answer

|

Juanjo Martinez · Accepted Answer · 2021-07-30 11:11:48Z

48

+300

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
                }
            }
        }
    }
});

answered Jul 30, 2021 at 11:11

Juanjo Martinez

1,0869 silver badges19 bronze badges

4 Comments

Anjil Dhamala Over a year ago

This helped me out. To others, here's a link to the latest docs on this chartjs.org/docs/3.7.0/samples/line/multi-axis.html

Tim Bogdanov Over a year ago

Right, because the question is about Chart.js 2 not 3

Juanjo Martinez Over a year ago

But its still the top result for 2 y axes chartjs on google, and having a solution for V3 helps people to not look up a migration guide for a snippet they got from SO

user447356 Mar 19 at 13:49

I agree that while the question is about v2 and this answer is for v3, it's still very useful. Thanks.

Kanish · Accepted Answer · 2021-06-08 06:25:48Z

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 }} 
/>

Collectives™ on Stack Overflow

How to use two Y axes in Chart.js v2?

3 Answers 3

11 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related