Ripl

Appearance

Radial Bar Chart ​

The Radial Bar Chart gives each category a concentric ring and sweeps its arc clockwise from the top in proportion to its value. Use it for a handful of progress-style metrics against a shared max, where a stack of straight bars would waste the space a dashboard tile gives you. innerRadius and range set the hole and the angular span, gap spaces the rings, trackColor paints the faint track behind each value arc, and rounded, labels, legend and format finish it. Value arcs are hit-tested on their stroke, so every ring is hoverable rather than only the outermost. Canvas by default, SVG or a terminal by passing a context.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createRadialBarChart,
} from '@ripl/charts';

const chart = createRadialBarChart('#container', {
    data: [
        {
            language: 'JavaScript',
            share: 92,
        },
        {
            language: 'Python',
            share: 78,
        },
        {
            language: 'Rust',
            share: 61,
        },
    ],
    key: 'language',
    value: 'share',
    max: 100,
    format: v => `${v}%`,
});

Data Format ​

Each item provides a category key and a numeric value:

ts
const data = [
    {
        language: 'JavaScript',
        share: 92,
    },
    {
        language: 'Python',
        share: 78,
    },
];

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.

ts
createRadialBarChart('#container', {
    data,
    key: 'id',
    value: 'progress',
    label: 'name',
    colorBy: 'team',
    max: 100,
    // Hole in the middle, as a ratio of the chart size (0–1).
    innerRadius: 0.3,
    // Sweep of a full-value bar, in degrees.
    range: 270,
    // Gap between rings, as a ratio of the ring thickness (0–0.9).
    gap: 0.3,
    trackColor: '#e5e7eb',
    rounded: true,
    legend: { position: 'right' },
    // Each ring's value, printed just past the end of its bar. The position is fixed, so
    // `anchor` has no effect here.
    labels: {
        visible: true,
        font: '11px sans-serif',
        fontColor: '#555555',
    },
    format: 'percentage',
});

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.

ts
// Emitted when a bar is clicked.
chart.on('barclick', event => console.log(event.data)); // event.data: RadialBarChartBarEvent
// Emitted when the pointer enters a bar.
chart.on('barenter', event => console.log(event.data)); // event.data: RadialBarChartBarEvent
// Emitted when the pointer leaves a bar.
chart.on('barleave', event => console.log(event.data)); // event.data: RadialBarChartBarEvent