Ripl

Appearance

Radial Bar Chart ​

The Radial Bar Chart lays each category out as a concentric ring whose arc length encodes its value — a circular take on the bar chart that reads well for a handful of comparable metrics or progress-style values. Each ring has a faint track behind a colored value arc that sweeps clockwise from the top.

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',
    maxValue: 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 ​

  • data — The data array
  • key — Category accessor (a field name or a function)
  • value — Numeric value accessor; encoded as the arc length
  • label — Optional label accessor (defaults to key)
  • color — Optional per-category color accessor
  • maxValue — Value mapped to a full sweep (defaults to the data maximum)
  • innerRadius — Inner hole radius as a ratio of the chart size (default 0.2)
  • range — Angular sweep of a full-value bar in degrees (default 360)
  • gap — Gap between rings as a ratio of ring thickness (default 0.25)
  • rounded — Round the ends of each value bar and its track (default false)
  • trackColor — Background track color
  • legend — boolean | ChartLegendOptions — Category legend
  • format — Value formatter for tooltips
  • padding, title, animation — Standard chart options