Pie Chart

The Pie Chart illustrates numerical proportions as angular slices of a circle. It supports animated entry, exit, and reorder transitions when data changes, and can switch to a donut layout by setting an innerRadius. Hover any slice to see a tooltip, and toggle the donut mode in the demo below.

NOTE

For the full API, see the Charts API Reference.

Donut

Usage

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

const chart = createPieChart('#container', {
    key: 'id',
    value: 'value',
    label: 'label',
    data: [
        { id: '1',
            label: 'Australia',
            value: 55 },
        { id: '2',
            label: 'Poland',
            value: 21 },
        { id: '3',
            label: 'South Africa',
            value: 185 },
    ],
});

Data Format

Each item needs a unique key, a numeric value, and a display label:

const data = [
    { id: 'au',
        label: 'Australia',
        value: 55 },
    { id: 'pl',
        label: 'Poland',
        value: 21 },
    { id: 'za',
        label: 'South Africa',
        value: 185 },
];

The key, value, and label options map to fields in each data item.

Variants

Donut

Set innerRadius (0–1, as a fraction of the outer radius) to create a donut chart:

createPieChart('#container', {
    data,
    key: 'id',
    value: 'value',
    label: 'label',
    innerRadius: 0.5,
});

Custom start angle

Rotate the starting position of the first slice:

createPieChart('#container', {
    data,
    key: 'id',
    value: 'value',
    label: 'label',
    startAngle: Math.PI,
});

Options

• data — The data array
• key — Unique identifier field for each slice
• value — Numeric value field
• label — Display label field
• innerRadius — Inner radius ratio for donut mode (0–1, default 0)
• startAngle — Starting angle in radians (default 0)
• tooltip — boolean | ChartTooltipOptions — Show/configure tooltips (default true)
• legend — boolean | ChartLegendOptions — Show/configure legend