How to change the bandwidth in Chartjs 2 charts

Question

Maybe someone told me how to change the bandwidth in Chartjs 2 charts. There is nothing about this in the documentation.

https://github.com/nnnick/Chart.js/tree/v2.0-dev/docsI do not know what to do.

Answer 1

Please note that some changes seem to be taking place. The actual configuration will depend on which v2.0 you are using.

For version 2.0.0-alpha

Set categorySpacing for xAxes. You can do it globally

 Chart.defaults.bar.scales.xAxes[0].categorySpacing = 0 

or you can do it on schedule

 ... scales: { xAxes: [{ categorySpacing: 0 }], ... 

Fiddle - http://jsfiddle.net/beehe4eg/

---

For version 1.0.2

Adjust barValueSpacing and barDatasetSpacing to make the bars closer. This will automatically increase their width.

Answer 2

For version 2.4.0 barThickness - manually sets the width of each bar in pixels. If not set, bands are automatically selected.

 options = { scales: { xAxes: [{ barThickness : 73 }] } } 

Answer 3

For me, having tried 2.0 beta, it worked to set barPercentage to the xAxes scale option.

This is what I used:

 var options = { data: chartData, type: "bar", options: { scales: { xAxes: [{ barPercentage: 0.5 }] } } }; var chart = new Chart(chartCtx, options);