Skip to content

Polar Area Chart

The Polar Area Chart renders equal-angle segments whose radius encodes the value, making it easy to compare magnitudes across categories. Unlike a pie chart (where angle encodes value), all slices share the same angle — only the radius varies. The chart includes animated axis rings, radial lines, and labels that enter on first render and transition smoothly on data updates.

NOTE

For the full API, see the Charts API Reference.

Example

typescript
const chart = createPolarAreaChart(context, {
    key: 'id',
    value: 'value',
    label: 'label',
    data: [
        { id: '1',
            label: 'Speed',
            value: 72 },
        { id: '2',
            label: 'Strength',
            value: 45 },
        { id: '3',
            label: 'Defense',
            value: 88 },
        { id: '4',
            label: 'Magic',
            value: 63 },
        { id: '5',
            label: 'Luck',
            value: 31 },
        { id: '6',
            label: 'Agility',
            value: 55 },
    ],
});