# React Polar Area Chart

A React polar area chart with Chart.js: segments with equal angles and a radius per value, colored from the theme in light and dark mode.

A polar area chart compares a few values in a circle, such as the ratings of one product. It looks like a pie chart, but every segment has the same angle and its radius shows the value. In [AdminKit for React](/react/) you draw it with the `ChartJs` component, in the free and PRO versions. AdminKit PRO also draws it with ApexCharts through `ApexChart`.

The component takes a function of the theme colors, so the segments follow light and dark mode. See [Chart setup](/react/docs/charts/overview/).

## Example

Five ratings of one car model, one theme color per segment.

```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>
```
```tsx code
import { ChartJs } from "@/components/plugins/chartjs";

export function RatingsPolarAreaChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Ratings of Model S"
        config={(theme) => ({
          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 },
        })}
      />
    </div>
  );
}
```

Use it in a page in `src/routes/`. Pages load when they are opened (`React.lazy` in `src/app.tsx`), so Chart.js is only downloaded for pages that draw a chart.

```tsx title="src/routes/models.tsx"
import { RatingsPolarAreaChart } from "@/components/ratings-polar-area-chart";

export default function Page() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title">Model S</h2>
      </div>
      <div className="card-body">
        <RatingsPolarAreaChart />
      </div>
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `config` | `(theme: Theme) => ChartConfiguration` | | The Chart.js configuration. Called again with the new colors when the color mode changes |

Other props, such as `id` and `aria-label`, go to the `<canvas>`. The `.chart` container is 300px high (other heights on [Chart setup](/react/docs/charts/overview/#chartjs)).

## Scale and legend

The example keeps Chart.js' defaults: a legend above the chart and a radial scale with rings and tick labels. The rings and labels take the text and border colors that AdminKit sets for the current mode. To hide the tick labels, set them on the `r` scale:

```tsx
options: {
  maintainAspectRatio: false,
  scales: { r: { ticks: { display: false } } },
},
```

`ChartJs` imports `chart.js/auto`, so the polar area controller and its radial scale are registered without extra imports.

## ApexCharts example

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

This version shows nine values with `ApexChart`, at 80% opacity. Below 480px wide, the `responsive` option shrinks the chart and moves the legend underneath.

```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>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

export function SegmentsPolarAreaChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        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" },
              },
            },
          ],
        })}
      />
    </div>
  );
}
```

The example sets white segment borders. Leave `stroke.colors` out and `ApexChart` uses the surface color (`theme.white`) instead, which follows dark mode. Polar area charts are drawn again on a color mode change, without animation.

## Accessibility

- `ChartJs` renders the `<canvas>` with `role="img"`. Give it an `aria-label` and write the values that matter in text, since screen readers do not read the segments.
- Each segment has its own color, and the Chart.js legend names them. Keep it visible, or label the segments in text.
- Under `prefers-reduced-motion`, the charts draw without the entrance animation.

## Related

- [Next.js polar area chart](/nextjs/docs/charts/polar-area-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 polar area chart](/bootstrap/docs/charts/polar-area-chart/): the polar area chart of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ChartJs`, `ApexChart` and `VectorMap` components
- [Radar chart](/react/docs/charts/radar-chart/): the same ratings for two models
- [Chart.js demo](https://react-demo.adminkit.io/charts-chartjs)

---

Canonical HTML page: https://adminkit.io/react/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