[Chartjs]-Chart.js Bar Chart – how to chart bars from 0

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.

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

use beginat zero like below:

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

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

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

You can use d3.js for the intended behaviour. Here is a good post regarding that.
Or
You can also follow this article tweaking the plotkit chart to show the downwards negative bar.

To make it work it with chart.js(though not advisable as this is not supported in Chart.js) you can use this github pull and instead of using the global configuration object, i.e. setting:

Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.barBeginAtOrigin = false,
Chart.defaults.global.animation = false;

use a separate config object and pass it into the chart constructor:

var chartOptions = {
    responsive:true,
    scaleBeginAtZero:false,
    barBeginAtOrigin:true
}
var chartInstance = new Chart(ctx).Bar(myChartData, chartOptions);

This works for me.

scales: {
  y: {
    beginAtZero: true
  },
}