How to modify bar width in Chartjs 2 bar charts
Solution 1
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.
Solution 2
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
}]
}
}
Solution 3
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);
VictorArcas
Updated on July 09, 2022Comments
-
VictorArcas almost 2 years
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.
-
potatopeelings about 8 yearsIt might have changed thence, the above answer was for 2.0.0-alpha.
-
Prince Paul almost 7 yearsbarThickness 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.
-
arcom almost 7 yearsso still no way to set a max height for when there are only one or two values, then it can auto-calculate it otherwise?
-
Jacob Valenta over 6 yearsThis kind of worked for me. I'm not using a linear scale, so I went with
barPercentage