How to Vary the Thickness of Doughnut Chart in Chart.js ?

Last Updated : 03 Jan, 2024

Doughnut charts are widely used for representing data in a circular format that allows users to compare the proportions of different categories. We can use the cutout percentage property to accomplish this task.

ChartJS CDN Link:

To use Chart.js you have to include the CDN link in your HTML.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Cutout Percentage

The thickness of a doughnut chart can be controlled by adjusting the size of the central cutout. This cutout is essentially an empty circle in the center of the doughnut. You can use this property by assigning a value to the cutout property inside the chart options.

Syntax:

options: {
    cutout: 60,
    // other properties
}

Example 1: In this example, we change the thickness of doughnut using cutout property that changes the center cutout of doughnut.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Vary Doughnut Thickness in Chart.js</title>
 
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js@3.8.0">
    </script>
</head>
 
<body>
    <div>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
 
        <h3>Chart.js Doughnut Chart</h3>
 
        <div>
            <canvas id="doughnutChartID"></canvas>
        </div>
    </div>
 
    <script>
        new Chart(document.getElementById("doughnutChartID"), {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [30, 70],
                    backgroundColor: ['green', 'yellow'],
                }],
                labels: ['Red', 'Blue'],
            },
            options: {
                cutout: 150,// Adjust the cutout percentage here
                radius: 190,
            }
        });
    </script>
</body>
 
</html>

Output:

doughWidthGIF

Example 2: In this example, we change the thickness of pie chart using cutout property that changes the center cutout of pie chart.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
      Customizing Pie Chart in Chart.js
    </title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js@3.8.0">
    </script>
</head>
 
<body>
    <div>
        <h1 style="color:green;
                   text-align: center;">
            GeeksforGeeks
        </h1>
 
        <h3 style="text-align: center;">
          Customized Pie Chart
        </h3>
 
        <div>
            <canvas id="pieChartID"></canvas>
        </div>
    </div>
 
    <script>
        new Chart(document.getElementById("pieChartID"), {
            type: 'pie',
            data: {
                labels: ['Category 1', 'Category 2', 'Category 3'],
                datasets: [{
                    data: [40, 60, 30],
                    backgroundColor: ['blue', 'orange', 'green'],
                    borderColor: 'white',
                    borderWidth: 2
                }]
            },
            options: {
                cutout: '40%',
                radius: '50%', 
            }
        });
    </script>
</body>
 
</html>