Ripl

Appearance

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, labels that enter on first render and transition smoothly on data updates, and an optional legend (shown by default).

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 },
    ],
});

Data Format ​

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

ts
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 — only the radius varies with value.

Options ​

  • data — The data array
  • key — Key accessor for each segment (a field name or a function)
  • value — Numeric value accessor; encoded as the segment radius
  • label — Label accessor for each segment
  • color — Optional per-segment color accessor (otherwise a palette color is assigned)
  • innerRadiusRatio — Inner radius as a ratio of the chart size (0–1, default 0.15)
  • maxRadiusRatio — Maximum outer radius as a ratio of the chart size (0–0.5, default 0.45)
  • padAngle — Padding angle between segments in radians (default 0.02)
  • levels — Number of concentric grid rings (default 4)
  • labels — false (default) | true (inside) | 'outside' (leader-line) | a full options object
  • legend — boolean | ChartLegendOptions — Segment legend (shown by default for multiple segments)
  • format — Value formatter for tooltips/labels ('number', 'percentage', or a function)
  • padding — Chart padding
  • title — string | ChartTitleOptions — Chart title
  • animation — boolean | ChartAnimationOptions — Enable/configure entry/update animations