Search code examples
htmlhtml5-canvasbar-chartchart.js

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>

Solution

  • 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,