18

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!

Nayzer
  • 247
  • 1
  • 2
  • 9

2 Answers2

33

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.

Sanjay Dutt
  • 2,192
  • 16
  • 16
14

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,
        }
    }
}
mhellmeier
  • 1,982
  • 1
  • 22
  • 35
  • 4
    Man, it can get pretty frustrating looking for an answer online, and finding the right answer, but taking an hour of troubleshooting to realize it's the right answer for the wrong version. (However *this* answer was marked clearly enough to make me realize what was going on with *another* answer!) – ashleedawg Oct 08 '20 at 20:42
  • 1
    Even more frustrating is when they move the migration guide, midway through migration. (I updated the link in answer) – ashleedawg Oct 08 '20 at 20:47
  • Any idea how to define multiple Y axis with >= 3.0? I cannot find it in documentation... – David Zencak Apr 08 '21 at 06:53
  • 'Migraton Guide' link in answer is dead - new link: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html – Stefan Oct 03 '22 at 09:24
  • Thanks, Stefan! I just updated the link in the answer. – mhellmeier Oct 03 '22 at 16:01