Polar Area Chart
Categories compared on a shared radius.
Introduction
Each segment takes an equal angle and varies in radius, so it reads as a circular bar chart.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Service centres per lakh residents
Centre density by district, compared on a common radius.
| Category | Centres per lakh residents |
|---|---|
| Pune | 11 |
| Nashik | 9 |
| Nagpur | 7 |
| Thane | 6 |
| Solapur | 4 |
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
labels: DISTRICTS,
datasets: [{ label: 'Centres per lakh residents', data: [11, 9, 7, 6, 4] }],
}),
[],
);
return (
<Chart
type='polarArea'
data={data}
title='Service centres per lakh residents'
summary='Centre density by district, compared on a common radius.'
height={320}
className='max-w-[420px]'
/>
);
}When to use it
Use it when the categories are naturally cyclical, or when you want a compact comparison of similar magnitudes. It is a poor choice when one value dwarfs the rest.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.