Show bar with zero value in ChartJs v2

Question

I'm wondering is there any way to show in ChartJs (in bar chart) bars with zero value?

I mean something like this: https://jsfiddle.net/vrg5cnk5/16/, so the second bar would be just blue border on level zero.

I used already this code:

ticks: {
    beginAtZero: true,
    min: 0,
    suggestedMin: 0
}

but I'm not surprised it didn't work.

Thanks in advance

Answer 1

Simply specify minBarLength in the dataset, with the minimum length in pixels the bars should have. See documentation.

Working Example:

var $chartCanvas = $('myCanvas');
var barChart = new Chart(myCanvas, {
    type: 'bar',
    data: {
        labels: ['Accepted Answer', 'Top rated answer', 'This Answer'],
        datasets:[{
            data: [0, 3, 10],
            minBarLength: 7,    // This is the important line!
        }]
    },
    options: {
        title: {
            display: true,
            text: 'helpfulness of answers to this questions'
        },
        legend: {
            display: false
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas"></canvas>

Answer 2

Here is the simplest way to do this in V3 chart js

Chart.defaults.datasets.bar.minBarLength = 5;

Answer 3

2019 Update

This can be done easily as below.

var myChart = new Chart(ctx, {
    ...
    options: {
        ...
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
);

You can find this in Chart.js documentation https://www.chartjs.org/docs/latest/