Comment ajouter des bordures arrondies à un graphique en anneau dans Chart.JS

How to add a Border Radius on Doughnut Chart in Chart JS

In this video we will focus on creating a border radius for the doughnut chart. Chart js 3 has introduced the border radius functionality which makes it easy for us to create a border radius on every segment of a doughnut chart.

Chart.js Boiler Template

To add a border radius to the doughnut chartjs we first need to create a doughnut chart. To create the doughnut chart we will use the Chart.js Boiler template that is available on the Chart.js getting started page.

Convert to type Doughnut Chartjs

The Chart js boiler template is a default bar chart type. So we will first convert the chart type to doughnut chart. Once we did that we must remove the scales or gridlines on Chart.js. This is because doughnut chart by default does not have any X and Y axis and gridlines.

Adding border radius to each doughnut chart slice

Chart.js 3 introduced a feature to create rounded borders for each doughnut slice. This namespace if called ‘borderRadius’. With this option we can start to define how rounded the borders of the doughnut slices become in pixels. It requires a number value to work.

The video below will show you exactly how to add rounded borders on a doughnut chart in Chart.JS