> For the complete documentation index, see [llms.txt](https://bb-docs.gitbook.io/bubweb-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bb-docs.gitbook.io/bubweb-doc/help-guide/getting-started/charts/polar-area.md).

# Polar Area

Setting up the chart

### Chart Polar Area

{% embed url="<https://codesandbox.io/s/floral-surf-7cqrtd?file=/index.html>" %}

### Example of a static polar area chart

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

{% code lineNumbers="true" %}

```html
<!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>
```

{% endcode %}

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FXQrdsGQBhs7CKljVbgB7%2Fformat1.png?alt=media&amp;token=b2e3a448-6e78-45af-9084-debd92af9c27" alt=""><figcaption></figcaption></figure>

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FeCfu47B1cAYxmRapDMZz%2Fformat2.png?alt=media&amp;token=636632ab-e65b-4a0d-be00-10ff0ff19f36" alt=""><figcaption></figcaption></figure>

#### Content to show per list item

**Series**

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