Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js same Y axis on left and right

I have a working chart that I made using chart.js, and by default the Y axis is on the left, but I would like to have Y axis data on both sides

I know I can change sides using:

yAxes: [{
 position: 'right'
}]

but I would like same Y axis data on both sides. Any idea how to do that?

Thank you for your help.

like image 988
Jan Keber Avatar asked Dec 02 '16 13:12

Jan Keber


Video Answer


1 Answers

Here's one way:

your yAxes is an Array [] with objects in it {}, so you need to add another yScale to it, here an example:

  scales: {
   yAxes: [{
    display: true,
    position: 'right',
    ticks: {
     beginAtZero: true
    }
   }, {
    display: true,
    position: 'left',
    ticks: {
     beginAtZero: true,
     max: 45,
     min: 0,
     stepSize: 5
    }
   }]
 }

enter image description here

Live demo: Chart.js Double yAxis

Notice you have to reformat one of the new axis to conform to the default, you might need to format both or tie those parameters to your data if it's going to change depending on what you want it to look like.

like image 173
Keno Avatar answered Sep 23 '22 06:09

Keno