Polar Area

Setting up the chart

Chart Polar Area

Example of a static polar area chart

All I did was make the hexadecimal colors and the chart list dynamic

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function () {
        var options = {
          colors: ["#4F46E5", "#10b981", "#ff9800", "#ff5724", "#0ea5e9"],
          series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
          labels: [
            "iPhone 13 Pro",
            "MacBook Air",
            "Bose QuietComfort 45 Headphones",
            "Samsung QLED 8K TV",
            "GoPro Hero 10",
            "Xbox Series X",
            "Amazon Echo Show 10",
            "Fitbit Versa 3",
            "Canon EOS 90D Camera"
          ],
          chart: {
            type: "polarArea",
            height: 390
          },
          stroke: {
            colors: ["#fff"]
          },
          fill: {
            opacity: 0.8
          },
          responsive: [
            {
              breakpoint: 480,
              options: {
                chart: {
                  width: 200
                },
                legend: {
                  position: "bottom"
                }
              }
            }
          ]
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
      };
    </script>
  </head>
  <body>
    <div id="chart" style="width: 95%;"></div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </body>
</html>

Content to show per list item

Series

 series: [14, 23, 21]
 labels: ["iPhone 13 Pro", "MacBook Air", "Bose QuietComfort 45 Headphones"]
PreviousDumbbellNextPWA

Last updated