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>
update December 2021:
barStrokeWidth
is deprecated.inflateAmount: 0
(default value is auto
) and it fixed the issue for medocs: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With