barPercentage and categoryPercentage in Chart JS

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.

barPercentage vs categoryPercentage in Chart JS

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.

Leave a comment

Your email address will not be published.