Polar Area Chart

The Polar Area Chart gives every category the same angle and varies only the radius, so magnitude is read as how far a segment reaches rather than how wide it is. Prefer it to a pie chart when the categories are a fixed cycle — months, compass sectors, hours — and the values need not sum to anything. levels sets the value rings, innerRadius and maxRadiusRatio size the plot, padAngle and padWidth space the segments, and labels, legend and format label them. Segments are filled with a translucent tint of their series color; hovering one dims the rest. Canvas, SVG and terminal contexts all draw it from the same options.

NOTE

For the full API, see the Charts API Reference.

Example

Usage

import {
    createPolarAreaChart,
} from '@ripl/charts';

const chart = createPolarAreaChart('#container', {
    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,
        },
    ],
});

Data Format

Each item needs a unique key, a numeric value (encoded as the segment's radius), and a label:

const data = [
    {
        id: 'speed',
        label: 'Speed',
        value: 72,
    },
    {
        id: 'strength',
        label: 'Strength',
        value: 45,
    },
    {
        id: 'defense',
        label: 'Defense',
        value: 88,
    },
];

Every segment spans the same angle, and only the radius varies with value.

Options

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

createPolarAreaChart('#container', {
    data,
    key: 'month',
    value: 'rainfall',
    label: 'month',
    colorBy: 'season',
    // Hole in the middle, as a fraction of the chart size (0–1).
    innerRadius: 0.15,
    // How far the longest segment reaches, as a fraction of the chart size. 0.5 touches the
    // edge, so this is the outer bound (0–0.5).
    maxRadiusRatio: 0.45,
    // Gap between adjacent segments, in pixels — a constant width whatever the radius.
    padWidth: 2,
    // Deprecated: an angular gap, in radians, that widens with radius. Ignored while `padWidth` is set.
    padAngle: 0.02,
    // Concentric grid rings.
    levels: 4,
    labels: 'outside',
    legend: { position: 'right' },
    format: 'number',
});

Events

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

// Emitted when a segment is clicked.
chart.on('segmentclick', event => console.log(event.data)); // event.data: PolarAreaChartSegmentEvent
// Emitted when the pointer enters a segment.
chart.on('segmententer', event => console.log(event.data)); // event.data: PolarAreaChartSegmentEvent
// Emitted when the pointer leaves a segment.
chart.on('segmentleave', event => console.log(event.data)); // event.data: PolarAreaChartSegmentEvent

Polar Area Chart ​

Example ​

Usage ​

Data Format ​