Gauge Chart

The Gauge Chart displays a single value on a semi-circular arc, ideal for KPIs, progress indicators, and dashboard metrics. It supports configurable tick marks along the arc with optional labels, a custom value formatter, and smooth animated transitions when the value changes. The track and fill colors are fully customizable.

NOTE

For the full API, see the Charts API Reference.

Example

Usage

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

const chart = createGaugeChart('#container', {
    value: 72,
    min: 0,
    max: 100,
    label: 'Performance',
    formatValue: v => `${v}%`,
});

// Update value
chart.update({ value: 85 });

Options

• value — The current gauge value
• min — Minimum value (default 0)
• max — Maximum value (default 100)
• label — Label displayed below the value
• color — Gauge fill color (default pastel blue)
• trackColor — Background track color (default #e5e7eb)
• formatValue — Custom value formatter function
• tickCount — Number of tick marks along the arc (default 5, set to 0 to hide)
• showTickLabels — Whether to show value labels at each tick (default true)
• formatTickLabel — Custom formatter for tick labels