[Solved]-How to set max and min value for Y axis-Chart.js

yes you can set it to min and max range

options: {
            resposive: true,
            title: {
                display: true
            },
            hover: {
                mode: 'index',
                intersect: true
            },
            scales: {
                y: {
                    suggestedmin: 0,
                    suggestedmax: 500
                }
            }
        }

since none of the suggestions above helped me with charts.js 2.1.4, i solved it by adding the value 0 to my data set array (but no extra label):

statsdata.push(0);

[...]

var mychart = new chart(ctx, {
    type: 'horizontalbar',
    data: {
        datasets: [{
            data: statsdata,
[...]

with 1.1.1, i used the following to fix the scale between 0.0 and 1.0:

var options = {
    scaleoverride: true,
    scalestartvalue: 0,
    scalesteps: 10,
    scalestepwidth: 0.1
}

v3.x (v3.5.0)

linear cartesian axis

let options = {
  scales: {
    y: {
      beginatzero: true,
      suggestedmax: 69
    },
    x: {
      beginatzero: true,
      suggestedmax: 420
    },
    ticks: {
      stepsize: 1
    }
  }
}

ref. https://www.chartjs.org/docs/3.5.0/axes/cartesian/linear.html

linear radial axes

let options = {
  scales: {
    r: {
      beginatzero: true,
      suggestedmax: 5,
      ticks: {
        stepsize: 1
      }
    }
  }
}

ref. https://www.chartjs.org/docs/3.5.0/axes/radial/linear.html

v2.x (v2.9.4)

linear cartesian axis

let options = {
    scale: {
      ticks: {
        beginatzero: true,
        stepsize: 1,
        suggestedmax: 5,
      }
    }
}

ref. https://www.chartjs.org/docs/2.9.4/axes/cartesian/linear.html

linear radial axes

let options = {
  scale: {
    ticks: {
      beginatzero: true,
      stepsize: 1,
      suggestedmax: 5,
    }
  }
}

ref. https://www.chartjs.org/docs/2.9.4/axes/radial/linear.html

note: scale in singular in v2 and plural in v3

there's so many conflicting answers to this, most of which had no effect for me.

i was finally able to set (or retrieve current) x-axis minimum & maximum displayed values with chart.options.scales.xaxes[0].ticks.min (even if min & max are only a subset of the data assigned to the chart.)

using a time scale in my case, i used:

chart.options.scales.xaxes[0].ticks.min = 1590969600000;  //jun 1, 2020
chart.options.scales.xaxes[0].ticks.max = 1593561600000;  //jul 1, 2020
chart.update();

(i found no need to set the step values or beginatzero, etc.)

this is for charts.js 2.0:

the reason some of these are not working is because you should declare your options when you create your chart like so:

$(function () {
    var ctxline = document.getelementbyid("mylinechart");
    var mylinechart = new chart(ctxline, {
        type: 'line',
        data: dataline,
        options: {
            scales: {
                yaxes: [{
                    ticks: {
                        min: 0,
                        beginatzero: true
                    }
                }]
            }
        }

    });
})

documentation for this is here: http://www.chartjs.org/docs/#scales

in my case, i used a callback in yaxis ticks, my values are in percent and when it reaches 100% it doesn't show the dot, i used this :

      yaxes: [{
                   ticks: {
                       beginatzero: true,
                       steps: 10,
                       stepvalue: 5,
                       min: 0,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

and it worked well.

just set the value for scalestartvalue in your options.

var options = {
   // ....
   scalestartvalue: 0,
}

see the documentation for this here.

yaxes: [{
    display: true,
    ticks: {
        beginatzero: true,
        steps:10,
        stepvalue:5,
        max:100
    }
}]

> best solution

  "options":{
                    scales: {
                                yaxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedmin: 0, //min
                                        suggestedmax: 100 //max 
                                    }
                                }]
                            }
                    }

for "chart.js": "^3.6.1",

options: {          
    scales: {
        y: {
            min: 0,
            max: 100,
        }
    }
}

for chart.js v3.2.0, do this:

let options = {
    scales: {
        y: {
            suggestedmin: 0,
            suggestedmax: 69
        },
        x: {
            suggestedmin: 0,
            suggestedmax: 420
        }
    }
}

documentation: https://www.chartjs.org/docs/latest/axes/#axis-range-settings

the above answers didn't work for me. possibly the option names were changed since '11, but the following did the trick for me:

chartjsprovider.setoptions
  scalebeginatzero: true

window.onload = function(){
var ctx = document.getelementbyid("canvas").getcontext("2d");
window.myline = new chart(ctx ,{
          type: 'line',
          data: yourdata,
          options: {
            scales: {
                yaxes: [{
                    ticks: {
                        beginatzero:true,
                        min: 0,
                        max: 500    
                    }
                  }]
               }
            }
});

i configure with 'options' in v2.

you should read documentation: http://www.chartjs.org/docs/#scales-linear-scale

i wrote a js to display values from 0 to 100 in y-axis with a gap of 20.

this is my script.js

//x-axis
var vehicles = ["trucks", "cars", "bikes", "jeeps"];

//the percentage of vehicles of each type
var percentage = [41, 76, 29, 50];

var ctx = document.getelementbyid("barchart");
var linechart = new chart(ctx, {
  type: 'bar',
  data: {
    labels: vehicles,
    datasets: [{
      data: percentage,
      label: "percentage of vehicles",
      backgroundcolor: "#3e95cd",
      fill: false
    }]
  },
  options: {
    scales: {
      yaxes: [{
        ticks: {
          beginatzero: true,
          min: 0,
          max: 100,
          stepsize: 20,
        }
      }]
    }
  }
});

this is the graph displayed on the web.

chartjs v2.4.0

as shown in the examples at https://github.com/jtblin/angular-chart.js on the 7th of febuary 2017 (since this seems to be subject to frequent change):

var options = {
    yaxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepsize: 20
        }
    }]
}

this will result in 5 y-axis values as such:

100
80
60
40
20
0

as of feb 2022, this works. here is how one can change it

var options = {
    scales: {
        yaxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};

for chart.js v2 (beta), use:

var options = {
    scales: {
        yaxes: [{
            display: true,
            ticks: {
                suggestedmin: 0,    // minimum will be 0, unless there is a lower value.
                // or //
                beginatzero: true   // minimum value will be 0.
            }
        }]
    }
};

see chart.js documentation on linear axes configuration for more details.