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!
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 to share