# Next.js Polar Area Chart

A Next.js polar area chart as a Chart.js client component: equal-angle segments sized by value, colored by the theme and drawn after hydration.

Use a polar area chart to compare a few scores, such as five ratings of one model. Every segment has the same angle, and its radius shows the value. [AdminKit for Next.js](/nextjs/) draws it with the `ChartJs` component, in the free and PRO versions. AdminKit PRO also has `ApexChart` for ApexCharts.

`ChartJs` is a client component, and its `config` function reads the theme colors. Your page is a server component, and a server component cannot hand a function to a client component. So put the chart in a `"use client"` component and render that from your page. [Chart setup](/nextjs/docs/charts/overview/) explains the components.

## Example

Five ratings of one model, each segment in a theme color.

```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 title="src/components/ratings-polar-area-chart.tsx"
"use client";

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>
  );
}
```

The page stays a server component:

```tsx title="src/app/(dashboard)/models/page.tsx"
import { RatingsPolarAreaChart } from "@/components/ratings-polar-area-chart";
import { pageMetadata } from "@/lib/site";

export const metadata = pageMetadata("/models");

export default function ModelsPage() {
  return (
    <>
      <h1 className="h3 mb-3">Models</h1>
      <div className="card">
        <div className="card-header">
          <h2 className="card-title">Model S</h2>
        </div>
        <div className="card-body">
          <RatingsPolarAreaChart />
        </div>
      </div>
    </>
  );
}
```

The static HTML has no chart yet, only a skeleton in the `.chart` box. The segments draw once the page has hydrated.

## 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>`. `.chart` gives the container its 300px height. [Chart setup](/nextjs/docs/charts/overview/#chartjs) lists the other heights.

## Scale and legend

With Chart.js' defaults, the chart has a legend on top and a radial scale with rings and tick labels, drawn in the text and border colors 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`, which registers the polar area controller and the radial scale.

## ApexCharts example

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

The ApexCharts version shows nine values at 80% opacity. On screens narrower than 480px, the `responsive` option makes the chart smaller and puts the legend below it. Like the Chart.js file, this one starts with `"use client"`.

```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 title="src/components/segments-polar-area-chart.tsx"
"use client";

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 segment borders are white here. Without `stroke.colors`, `ApexChart` draws them in the surface color (`theme.white`), which follows dark mode. A color mode change draws polar area charts again, without animation.

## Accessibility

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

## Related

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

---

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