Chart.js Bar Chart - how to draw charts from 0

Question

I would like to draw diagrams extending from zero, so that positive numbers grow up (as usual), but negative numbers grow down from zero. I get instead all the numbers starting with a negative baseline.

Answer 1

Other answers did not help me. However, I managed to find another configuration option that worked 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 parameters, give me a histogram with a scale starting at 0.

Answer 2

I think you are 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); 

Answer 3

You can use d3.js for the intended behavior. Here is a good article. Or you can also follow this article to adjust the graph chart to show the negative panel down.

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

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

use a separate configuration object and pass it to the chart constructor:

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

Answer 4

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

Example:

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

Answer 5

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