Chart.js - Radar Chart

Chart.js radar chart, as the name implies, is used to show multiple data points and the difference between those data points. With the help of radar chart, we can easily compare the points of two or more different datasets.

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

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

  • options.datasets.line − It provides options for all the line datasets.

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

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

  • Options − It provides options for the whole chart

We need to use type: "radar" for creating the radar chart.

Example

Let’s take an example with the help of which we will create a radar 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: 'radar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 33, 35, 30, 38],
               backgroundColor: ['lightgrey'],
               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
               borderColor: ['black'],
               borderWidth: 1,
               pointRadius: 6,
            }],
         },
         options: {
            responsive: false,
            elements: {
               line: {
                  borderWidth: 3
               }
            }
         },
      });
   </script>
</body>
</html>

Output

Chart.js Radar Chart
Advertisements