One of the more complicated matters is the barPercentage and categoryPercentage in Chart JS. While both are very essential they might be confusing.
The Chart.js documentation does explain it in a closely visual manner it is not clear for most.
barPercentage vs categoryPercentage in Chart JS
This video will show you how the barPercentage and categoryPercentage work. Specifically how they effect your chart visually.
What is the barPercentage?
The barPercentage is a feature that controls the width of the bar measured in percentage. The default is 0.9 this means that the bar thickness or with is 90% of the assigned space for the bar.
The assigned space depends on the categoryPercentage.
What is the categoryPercentage?
The categoryPercentage is based on the axis. In a vertical bar chart the category is on the x-axis. In horizontal bar chart it is place on the y-axis.
However, the categoryPercentage is the space between the ticks. By default this value is set on 0.8 which indicates 80% of the space between the ticks.
So how is the width calculated combining barPercentage and categoryPercentage?
Let’s look at the barPercentage which is by default 0.9 or 90%. This means that 90% of the categoryPercentage assign width. However, the categoryPercentage was set on 0.8 or 80%.
Imagine is the full categoryPercentage in pixels is 100. In that case we need to calculate 100 * 0.8 = 80 pixels is the categoryPercentage.
From that 80 pixels we will take now the barPercentage of 0.9. Which would mean 80 pixels * 90% = 72 pixels is the true width of the bar.
Make sure to watch the video. As a visual representation is easier in understanding this and how to affects your bar. With this we could make full width bars like a Histogram Chart in Chart js.
Full Width Bar Chart in Chart JS
Once you understand that both the categoryPercentage and the barPercentage are crucial we can easily create a full width bar chart in Chart.js.
We want to make sure the bar will be covering the full segment on which the base of the chart rests. This is how we can control the bar thickness in a bar chart. The video shows exactly how.
How To Create Full Width Bar Chart in Chart JS
How To Increase Bar Thickness in Horizontal Bar Chart in Chart JS
Once you understand how the barPercentage and categoryPercentage works you will also know how to apply the same for a horizontal bar chart.
To do that we do exactly the same and add another step to make sure we swap the category axis from the X axis to the Y axis. This is how we can control the bar thickness in a horizontal bar chart.
How to Increase Space Between Bars in Bar Chart in Chart JS
So far we have covered how to increase the bar thickness but we can also narrow the bars and add additional space between each bar in Chart JS.
For that we will need to use the barPercentage and categoryPercentage but instead of increasing the value we will now lower or decrease the value. This video show exactly how.
French 
English 
Chinese 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish 
Vietnamese