Como colocar cantos arredondados em um gráfico de barras no Chart.JS 3

Border Radius Bar in Chart JS

In this video we will explore how to add rounded corners on a bar chart in Chart js. Often, this is referred to as border radius in chart js. Also known as a rounded bar chart.

Adding rounded borders or controlling the border radius in chart js is quite easy in Chart.js 3 and Chart.js 4. It transform the bar elements and giving them rounded edges or rounded bars. Each corner individually can be modified to specify how rounded the bar edges are.

Chart js rounded corners bar chart

This feature has been added and allows us with the namespace of ‘borderRadius‘ to control the rounded borders of a bar chart to make the bar appear rounded. Let’s explore how to do this.

Is Chartjs border radius not working?

If you experience that in Chart js the rounded corners are not showing you need to check a few items. First all check which version of Chart.js you are using. It is highly recommend to use Chart.js 3 which is the most full featured version. Any of the Chart.js 3 sub version are fine. Older version such as Chart.js 2 or Chart.js 1 does not always support this features.

If the border radius still does not work you need to check the dataset settings of that bar chart. Do you have borderRadius namespace correctly set in the dataset and double check if the value is an integer. Sometimes you might add ‘px’ to the value and this will not work. It will give an error as rounded border values must be a number or integer.

Create Rounded Border Bars Including Bottom in Chart.js

The video below covers a specific matter if you struggle to make the chart borders at the base border radius rounded as well. As Chart.js blocks this by default.

Are you trying to get the bottom of a vertical bar chart rounded?
In that case you need to have an extra settings. The base of the bar has a default fixed setting that does not read the rounded border or border radius options.

This is why you will see only the top have a nice curves but the bottom does not. The solution to this is simply informing Chart JS that the base should be curved as well so both sides as rounded bars. This do this we need to add ‘borderSkipped: false’ in the dataset. Which is set on true by default. Once you apply this the borderRadius namespace will also apply to the base.

Are you trying to get the left side of a horizontal bar chart rounded?
In that case you need to have an extra settings which is exactly the same as above. The base of the bar has a default fixed setting that does not read the rounded border or border radius options. Since the horizontal bar chart has the base swmitched to the left. That impacts the left base and won’t budge unless we add ‘borderSkipped: false’ in the dataset.

How about a stacked bar chart border radius in Chart js?

This is currently a tough matter. Chart.js will make on bar border radius but it does not implement it will on the others. I will cover this soon.

How to add in Chart JS legend border radius on the color boxes

This question is a good one but slightly out of scope of this page. However Chart.js has a nice build in solution to make the color boxes nice round with border radius. For that you can watch this video: Como adicionar bordas arredondadas nas etiquetas da caixa de legenda no Chart.js