How to remove bars for those bars with zero value in Chartjs bar chart?

Question

Even if the bars have value of zero in bar chart created using chartjs, they still show a visible bar. This is misleading for my purpose and I would like to have it removed and show nothing there (meaning that, I still want to show labels with zero value but not the bar). I tried changing min value of y-axis but it doesn't make a difference. The image below shows this problem for columns 56, 60 and 78. Is there a way to get rid of this? Thanks!

And here is my script:

<div>
  <canvas id="canvas_bar" height="250", width = "300" ></canvas>
</div>

<script>
    var barChartData = {
        labels : [56, 60, 78, 90],
        datasets : [
        {   fillColor : "rgba(139,0,0,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            data : [20.0, 0, 0, 50]  },

        {   fillColor : "rgba(1,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            data : [0, 0.0, 40.0, 10]  }
        ]
    }
    window.onload = function(){
        var ctx = document.getElementById("canvas_bar").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            animation: false,
            responsive : false,
            barValueSpacing : 15,
            scaleShowVerticalLines: false,
        });
    }
</script>

Answer 1

I found that you can add skipNull property to dataset objects. And bars where value is null or undefined won't take any space.

https://www.chartjs.org/docs/3.2.0/charts/bar.html

Answer 2

update December 2021:

• barStrokeWidth is deprecated.
• I used inflateAmount: 0 (default value is auto) and it fixed the issue for me

docs: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties

Answer 3

if barShowStroke : true

not working try to

barRadius: 0

Answer 4

By default the barStrokeWidth value is 2.

Just add this :

barStrokeWidth:0,

or :

barShowStroke : false,

In your options.

http://www.chartjs.org/docs/#bar-chart-chart-options

//Boolean - If there is a stroke on each bar

barShowStroke : true,

//Number - Pixel width of the bar stroke

barStrokeWidth : 2,