I'm trying to remove the space between my bar chart bars, but even though I see this solution many places it doesn't work for me. It's also not mentioned in the Chart.js docs so that is odd. Can someone tell me how to specify it?
var options = { barValueSpacing : 1, // doesn't work; find another way barDatasetSpacing : 1, // doesn't work; find another way legend: { display: false // Hides annoying dataset label }, tooltips: { callbacks: { label: function(tooltipItem) { return tooltipItem.yLabel; } } } }; var ctx = document.getElementById("canvasX").getContext("2d"); var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: options });
A standard bar chart should have gaps between bars that are slightly narrower than the bars. The exceptions to this are the exception of histograms and clustered bar charts.
Setting Bar Spacing Options You can change the spacing of the bars on any bar or column chart by using the X Gap Ratio and Bar Gap Ratio options. X Gap Ratio is the amount of space between categories of bars. By default it is set at 100, meaning that the space between categories is 100% of the width of a bar.
You need to set barPercentage
and categoryPercentage
to 1.0
on the x-axis scale. Add this to your options
object:
var options = { ... scales: { xAxes: [{ categoryPercentage: 1.0, barPercentage: 1.0 }] } };
See http://www.chartjs.org/docs/#bar-chart-chart-options
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