[chart.js] How to set max and min value for Y axis

I am using line chart from http://www.chartjs.org/

As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?

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

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
}

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.

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 
                                    }
                                }]
                            }
                    }

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

Just set the value for scaleStartValue in your options.

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

See the documentation for this here.

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_x000D_
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];_x000D_
_x000D_
//The percentage of vehicles of each type_x000D_
var percentage = [41, 76, 29, 50];_x000D_
_x000D_
var ctx = document.getElementById("barChart");_x000D_
var lineChart = new Chart(ctx, {_x000D_
  type: 'bar',_x000D_
  data: {_x000D_
    labels: vehicles,_x000D_
    datasets: [{_x000D_
      data: percentage,_x000D_
      label: "Percentage of vehicles",_x000D_
      backgroundColor: "#3e95cd",_x000D_
      fill: false_x000D_
    }]_x000D_
  },_x000D_
  options: {_x000D_
    scales: {_x000D_
      yAxes: [{_x000D_
        ticks: {_x000D_
          beginAtZero: true,_x000D_
          min: 0,_x000D_
          max: 100,_x000D_
          stepSize: 20,_x000D_
        }_x000D_
      }]_x000D_
    }_x000D_
  }_x000D_
});

This is the graph displayed on the web.

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

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,
[...]

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.

Writing this in 2016 while Chart js 2.3.0 is the latest one. Here is how one can change it

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

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.)