Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

bar chart

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>
like image 236
Manavalan Gajapathy Avatar asked Sep 15 '25 02:09

Manavalan Gajapathy


1 Answers

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

like image 166
adi carmel Avatar answered Sep 16 '25 16:09

adi carmel