Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js Bar Chart: How to remove space between the bars in v2.3?

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 }); 
like image 342
DeannaD Avatar asked Oct 05 '16 16:10

DeannaD


People also ask

Should bar charts have spaces in between the bars?

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.

How do I increase the space between bars on a bar graph?

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.


1 Answers

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

like image 62
Jonathon Hill Avatar answered Sep 17 '22 12:09

Jonathon Hill