111

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?

just.me
  • 2,155
  • 5
  • 16
  • 25

3 Answers3

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

Quince
  • 14,790
  • 6
  • 60
  • 69
  • 1
    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? – just.me Jun 29 '16 at 14:20
  • 4
    sorry typo on my part should be `yAxisID` not `yAxesID` – Quince Jun 30 '16 at 14:54
  • @Quince Hi Quince but how to applied two different type of chart (line and bar) with your code. Thanks in advance – Bcktr Sep 27 '17 at 02:09
  • 1
    @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. – Quince Sep 28 '17 at 08:38
  • Upvoted, I was looking for a way to put 2 line of codes in the yaxes yAxes: [{ ticks: { beginAtZero:true }, gridLines: { display:false } }] Was putting the comma in the wrong place xD – Yorki Bonilla Nov 30 '17 at 12:23
  • Does anyone know how you can remove the right hand side figures that go up along the y axis? So there's not labels along the first `y axis` AND the second `y axis` that appears on the right? – xo. Apr 10 '20 at 17:12
  • 2
    Do you know how to set ticks (min/max) automatically by data? It works for left-axis, by default right-axis is 0-1 – sparkle Jun 19 '20 at 16:54
  • Do you know how to add different units of measurements for each of the Y axes? – AN00 Oct 06 '20 at 09:40
  • Unfortunately, one scale affects the other if more than 2 series are involved. Works fine with 2 lines of diff scales, but add a 3rd one with diff scales, no longer works. – Genci Ymeri Apr 19 '21 at 19:04
  • 1
    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 Jul 30 '21 at 11:05
  • BTW axes have default ids if you don't provide them. You can reference the axes by these in the datasets in that case: `x-axis-0`, `y-axis-0`, `y-axis-1`. – totymedli Nov 17 '21 at 13:13
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
                }
            }
        }
    }
});
Juanjo Martinez
  • 679
  • 7
  • 18
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 }} 
/>
Kanish
  • 273
  • 4
  • 10