19

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.

3 Answers 3

25

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.

1
  • this is cool, I found that I can also duplicate same axes on both sides, which makes chart more readable if chart is displayed very large.
    – jumpjack
    Feb 28, 2020 at 15:15
1

The solution of @Keno didn't worked for me. Think because my chart needed to be min: 1000 and not min: 0.

What worked for me was:

scales: {
   yAxes: [{
    display: true,
    position: 'right',
    ticks: {
     beginAtZero: false,
     max: 2000,
     min: 1000,
     stepSize: 100
    }
   }, {
    display: true,
    position: 'left',
    ticks: {
     beginAtZero: false,
     max: 2000,
     min: 1000,
     stepSize: 100
    }
   }]
 }
0

This is what works for me, but I still need to display none the scal at the left side

scales: {
    myScale: {
        type: 'linear',
        position: 'right',
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.