Radar Chart

Radar charts are similar to pie charts, but each segment has the same angle.

Chart.js example

new Chart(document.getElementById("chartjs-radar"), {
  type: "radar",
  data: {
    labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
    datasets: [{
      label: "Model X",
      backgroundColor: "rgba(0, 123, 255, 0.2)",
      borderColor: window.theme.primary,
      pointBackgroundColor: window.theme.primary,
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: window.theme.primary,
      data: [70, 53, 82, 60, 33]
    }, {
      label: "Model S",
      backgroundColor: "rgba(220, 53, 69, 0.2)",
      borderColor: window.theme.danger,
      pointBackgroundColor: window.theme.danger,
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: window.theme.danger,
      data: [35, 38, 65, 85, 84]
    }]
  }
});

ApexCharts example

WARNING

This feature is only available in AdminKit PRO. Learn more.

var options = {
  series: [{
    name: 'Series 1',
    data: [80, 50, 30, 40, 100, 20],
  }],
  chart: {
    height: 350,
    type: 'radar',
  },
  xaxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  }
};

var chart = new ApexCharts(document.querySelector("#apexcharts-radar"), options);
chart.render();