18

Can someone told me how to modify bar width in Chartjs 2 bar charts. There is nothing about it in the documentation.

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

VictorArcas
  • 630
  • 2
  • 7
  • 23

3 Answers3

40

For version 2.4.0 barThickness - Manually set width of each bar in pixels. If not set, the bars are sized automatically.

options = {
    scales: {
        xAxes: [{
            barThickness : 73
        }]
    }
}
Mihail Lebedev
  • 501
  • 1
  • 4
  • 5
  • barThickness is the *only* option I can get to work on a horizontalBar chart. I don't like having to set the value so specifically - wish I could get percentage working. – shacker Jun 03 '17 at 18:19
  • so still no way to set a max height for when there are only one or two values, then it can auto-calculate it otherwise? – arcom Jul 18 '17 at 00:51
  • This kind of worked for me. I'm not using a linear scale, so I went with `barPercentage` – Jacob Valenta Oct 28 '17 at 00:23
17

For me, trying 2.0 beta, what worked was to set the barPercentage on 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);
py7133
  • 171
  • 1
  • 6
11

Note that there seems to be some changes going on. The actual configuration would depend on which v2.0 you are using.

For Version 2.0.0-alpha

Set categorySpacing for the xAxes. You can do this globally

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

or you can do it by chart

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

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

For Version 1.0.2

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

potatopeelings
  • 40,709
  • 7
  • 95
  • 119