Chart.js - Polar Area Chart

Chart.js polar area charts are like pie charts. The only difference is that in polar area charts, each segment has the same angle i.e., the radius of the segment differs according to the value. If you want to show a comparison between data but also want to show a scale of values for context, polar area chart is an excellent choice.

Below are the namespaces to be used in polar area chart for dataset properties −

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

  • options.datasets.polarArea − It provides options for all polarArea 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: "polar" for creating the polar area chart.

Example

Let’s take an example with the help of which we will create a polar area 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: 'polarArea',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 15, 35, 25, 38],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

Output

Polar Area Chart
Advertisements