Chart.js: Always show 0 on Bar chart axis

[borgar]

Bar chart axis should always include a 0.

Bars must begin at zero because of the way we read them. We compare their heights (vertical bars) or lengths (horizontal bars), which only represent the differences in values accurately when they begin at zero. For example if the scale begins at 50, a bar that represents a value of 70 would be twice as high or long as a bar that represents a value of 60, resulting in an inaccurate representation of the difference between them.

— Stephen Few

If there is a need to break this it should be set up as an option override.

Test: http://jsfiddle.net/QwCKB/

[airblade]

I've harcoded this in my fork:

• Set the minimum y-value to 0
• Draw the 0 on the y axis

[nnnick]

I agree. On the list of todos for the next major release.

[jameshfisher]

Wow, can't believe this isn't available! I'll look elsewhere for bar charts. :-(

[alexanderlind]

This is a most flabbergasting flaw. Unbelievable that this beautiful plugin missed a fundamental business criteria like that. Both bars and lines need this option of course.

[shawnwhinnery]

Line charts need to start at 0 as well. Keep your original code though, Fox News will love it. xD

[nnnick]

I'm not sure if I agree that line charts should always start at zero, visual context at a small size is difficult when a scale a lot larger than the change itself.

Though there is a new option for doing this - pass scaleBeginAtZero: true into your options for chart types.

For bar charts, this now defaults to true.

[axelwass]

This new feauter should be in http://www.chartjs.org/docs/#line-chart documentation.

[BennyPolak]

For chartjs 2.0 I've found the solution. Put this in the options object.
Have fun!

scales: {
    yAxes: [{
      id: 'y-axis-0',
      gridLines: {
        display: true,
        lineWidth: 1,
        color: "rgba(0,0,0,0.30)"
      },
      ticks: {
        beginAtZero:true,
        mirror:false,
        suggestedMin: 0,
        suggestedMax: 500,
      },
      afterBuildTicks: function(chart) {

      }
    }],
    xAxes: [{
      id: 'x-axis-0',
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true
      }
    }]
}

[bartekmaciejewski]

hi, I've tried your solution but it didn't work for me - I found on stack other answer (http://stackoverflow.com/questions/43040867/show-bar-with-zero-value-in-chartjs-v2/), but it's more hack than solution - can you show on jsfiddle how exactly you soultion works?

[nickgrossman]

same here- doesn't work for me, and I would like my y axis to begin at zero!

[chesstrian]

@bartekmaciejewski @nickgrossman Not sure if you still need it, it works for me with:

var config = {
  type: 'bar',
  data: {
    ...
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
};

[tmukka]

@chesstrian the solution is not working for me, but i am able to find a solution from a site https://www.dyclassroom.com/chartjs/how-to-create-a-bar-graph-using-chartjs

where they are using min option for y axis, which can solve few of our requirements

yAxes: [{ ticks: { min: 0 } }]