Unclear bar chart in in chart.js documentation

It took me a while to find out that the following is indeed correct.
image

July’s value is 40, but the bar is flat.
It took me a while to actually recognize that this is correct since y axis starts at value 40.
I would suggest to start the y axis at 0 at least in the demo chart, or it could be confusing.
Alternatively, set July’s value to something bigger than 40.

Solution, use options for the chart as follow.

                    var myBarChart = new Chart(ctx, {
                        type: 'bar',
                        data: data,
                        //options: options
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        },
                    });

Author: Fantashit

1 thought on “Unclear bar chart in in chart.js documentation

  1. I’m using version 2.3.0 and I have a similar chart where the lowest value bar was flush with the bottom of the chart so it looked like it was not plotting at all. I never noticed that the bottom most line was indeed equal to the bar value of 60.

    But in contrast to the image above by the original poster, when I hover over that position, nothing pops up at all like it does on the other bar positions.

    Adding the options beginAtZero code fixed it though, so all is well. Thanks to everyone posting on this.
    Jim

Comments are closed.