Chart.js - Doughnut Chart

Chart.js doughnut chart is one of the most used charts to represent the data sets. Doughnut charts divided into various segments in which the arc of each segment shows the proportional value of each piece of data. If you want to show the relational proportions between data, doughnut chart is an excellent choice.

Following are the namespaces to be used in doughnut chart for dataset properties −

  • data.datasets[index] − It provides options for this dataset only.

  • options.datasets.doughnut − It provides options for all doughnut datasets.

  • options.elements.arc − It provides options for all the arc elements.

  • Options − It provides options for the whole chart

We need to use type: ’doughnut’ for creating the doughnut chart.

Example

Let’s take an example with the help of which we will create a doughnut chart −

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'doughnut',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 13, 35, 20, 38],
            backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
            hoverOffset: 5
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

Output

Doughnut Chart
Advertisements