Chart.js Bar Chart - how to chart bars from 0

Solution 1:

The other answers didn't work for me. However, I did manage to find another config option that did work for me.

var options = {
    // All of my other bar chart option here
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);

Passing this for my chart options give me a bar chart with the scale starting at 0.

Solution 2:

public barChartOptions: any = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true}
            }]
        },
     }

Solution 3:

use beginat zero like below:

options: {
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero:true
             }
         }]
     }
}

Solution 4:

I think you're looking for something like this

Fiddle

HTML

<canvas id="myChart" width="500" height="250"></canvas>

JS

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
    datasets: [
        {
            data: [65, 59, 80, 81, 56, 55, 40, -30]
        }
    ]
};

var options = {
    scaleBeginAtZero: false
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);

Solution 5:

I'm using Chart.js version 2.0.2 and this could be achieved using yAxes.min, and if the chart is empty you could use yAxes.suggestedMax

Example:

options:{
    .
    .
    .
    scales{
        yAxes:[{
            min:0,
            //this value will be overridden if the scale is greater than this value
            suggestedMax:10
        }]
    }