Ytukyg

I'd like to chart the bars extending from zero so that positive numbers grow upwards (as normal) but negative numbers grow downwards from zero. I get instead all numbers starting from a negative baseline.

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.

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

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

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

        }]

    }

public barChartOptions: any = {

    scales: {

        yAxes: [{

            ticks: {

                beginAtZero: true}

            }]

        },

     }

use beginat zero like below:

options: {

     scales: {

         yAxes: [{

             ticks: {

                 beginAtZero:true

             }

         }]

     }

}