ChartJS: How to set fixed Y axis max and min

38.2k views Asked by At

I have a line chart which I'm trying to set a fixed max and min values. I have tried the other suggestions found on SO, but it still doesn't work. My chart keeps re-setting the max and min values depending on the incoming data.

Here's my current options that I pass to my Line chart:

var options = {
        responsive: true,
        animation: false
};

I tried those settings too:

var options = {
    scales: {
        animation: false,
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: -1,
                suggestedMax: 1
            }
        }]
    }
};

Any idea what I'm doing wrong?

Thanks!

2

There are 2 answers

0
Sanjay Dutt On

To fix min and max value for yAxes scale use the below code.

options:{
            scales: {
                yAxes : [{
                    ticks : {
                        max : 1,    
                        min : -1
                    }
                }]
            }
        }

suggestedMax will only works when incoming data is lower than suggestedMax value. suggestedMin will works only when incoming data is greater than suggestedMin value.

5
mhellmeier On

For Chart.js version < 3.0:

From Sanjay Dutt's answer:

options:{
  scales: {
    yAxes : [{
      ticks : {
        max : 1,    
        min : -1
      }
    }]
  }
}

For Chart.js version >= 3.0:

Due to breaking changes in version 3.X, the above mentioned answer doesn't work anymore. Chart.js created a Migration Guide to solve the upcoming problems. The minimum and maximum values can now be configured directly to the options.scales:

options : {
    scales : {
        y : {
            min: -1,
            max: 1,
        }
    }
}