Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

chart.js

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.

like image 635
user1860288 Avatar asked Jun 03 '15 06:06

user1860288


People also ask

How do you make a bar graph start at 0?

If the metrics use the same unit of measurement, select the Display metrics on one axis check box. The range for the metrics are displayed on the left axis. Optionally, select the Start left axis at 0 checkbox to start the axis range at zero. For horizontal bar charts, select the Start bottom axis at 0 check box.

Can bar charts not start at zero?

When a bar chart does not start with a zero, the information you visualise can still remain correct but the people who'll see your bar chart will comprehend it in a wrong way. The difference between the values of the bars will either be too big or too small.

Should the Y-axis start at 0 in a bar chart?

The general idea is that a viewer should be able to use a ruler to measure the pieces of your visualization and find that the measurements are proportionate to the data they represent. In the case of bar charts, this means that the y-axis must always start at zero.

How do I change the order of a clustered bar chart?

Under Chart Tools, on the Design tab, in the Data group, click Select Data. In the Select Data Source dialog box, in the Legend Entries (Series) box, click the data series that you want to change the order of. Click the Move Up or Move Down arrows to move the data series to the position that you want.


2 Answers

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.

like image 97
Kbye Avatar answered Sep 18 '22 11:09

Kbye


public barChartOptions: any = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true}
            }]
        },
     }
like image 27
Reegan S Avatar answered Sep 22 '22 11:09

Reegan S