# Bootstrap 5 Polar Area Chart

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

## Chart.js example

`adminkit.chartjs()` creates the Chart.js chart from a function of the theme colors and calls it again when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div class="chart">
  <canvas id="chartjs-polar-area"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-polar-area", function (theme) {
  return {
    type: "polarArea",
    data: {
      labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
      datasets: [{
        label: "Model S",
        data: [35, 38, 65, 70, 24],
        backgroundColor: [
          theme.primary,
          theme.success,
          theme.danger,
          theme.warning,
          theme.info
        ]
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  };
});
</script>
```

## ApexCharts example

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div id="apexcharts-polar-area"></div>

<script>
var options = {
  series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
  chart: {
    height: 350,
    type: 'polarArea',
  },
  stroke: {
    colors: ['#fff']
  },
  fill: {
    opacity: 0.8
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
};

adminkit.apexcharts("#apexcharts-polar-area", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/polar-area-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io