How can I remove columns for these null bars in a Chartjs chart?

Even if the bars have a value of zero in a histogram created using charts, they still show a visible band. This is misleading for my purpose and I would like to remove it and show nothing (this means I still want to show nullable labels, but not a panel). I tried to change the minimum y-axis value, but it doesn't make any difference. The image below shows this problem for columns 56, 60, and 78. Is there a way to get rid of this? Thank!

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>

      

+3


source to share


1 answer


The default barStrokeWidth

is 2.

Just add this:

barStrokeWidth:0,

      

or:



barShowStroke : false,

      

In your settings.

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

// Boolean - If every woman has a stroke

barShowStroke: true,

// Number - Pixel width of the stroke

barStrokeWidth: 2,

0


source







All Articles