GitHub

Charts

Lightweight SVG chart primitives. Every sample below is exhaustive — each labeled row shows every severity, size, and state.

Sparkline

Tiny inline line or area chart. Every severity, both variants, and each feature flag.

severity
variant
feature
size

MiniBarChart

Inline micro bar chart. Every severity plus the last-bar highlight and sizes.

severity
highlightLast
size

ProgressRing

Circular progress. Every severity, a value progression, the indeterminate state, a custom center slot, and sizes.

severity
value
indeterminate
center slot
size

Gauge

Half-circle gauge. Every severity, with and without a label, min/max end labels, and multi-colour segments.

severity
646464646464
without label
824518
with label
82Health45Score18Errors
showLabels
010082Health
segments
010045Score
size
64Small64Medium64Large

TrendChart

Dashboard-sized trend. Every severity, plus axis labels, line-only, and straight segments.

severity
showAxis
4818
line only
straight

AreaChartMini

Area-only variant of TrendChart for KPI tiles. Every severity.

severity

LineChart

Full line chart on the visx engine — single or multi-series, axes, grid, legend, and hover tooltip. Series colours resolve to brand/severity tokens, so it re-skins per theme.

multi-series
  • Pemasukan
  • Pengeluaran
single

AreaChart

Area chart with token-coloured gradient fills. Overlay by default, or stacked.

overlay
  • Pemasukan
  • Pengeluaran
stacked
  • Pemasukan
  • Pengeluaran

BarChart

Bar chart — grouped or stacked, each optionally horizontal. Same data/xKey/series API as Line and Area.

grouped
  • Pemasukan
  • Pengeluaran
stacked
  • Pemasukan
  • Pengeluaran
horizontal
  • Pemasukan
  • Pengeluaran

CandlestickChart

Synced candlestick + volume chart for a daily OHLCV series. Up/down is CVD-safe by construction: up candles render hollow (light tint fill + heavier outline, not a bare fill-none — legible on a light surface), down candles solid-filled; the legend swatch matches (outlined for up, solid for down) — colour is never the only cue. Interactive: mouse-wheel zooms the x-axis anchored at the cursor, click-drag pans, and the toolbar (zoom in/out, pan left/right, reset/fit-all) drives the same visible window and shows the current bar count. Focus the chart and press +/- to zoom or the arrow keys to pan; the scrubber below the legend still reaches every bar regardless of zoom. An aria-live region mirrors the hovered/scrubbed bar for screen-reader users.

candlestick + volume — try the wheel, drag, toolbar, or keyboard
90 of 90 bars
90 daily bars from 2026-03-02 to 2026-05-30. Scroll to zoom, drag to pan.
  • Up
  • Down
price only
30 of 30 bars
  • Up
  • Down
with MA20/MA50 overlay
90 of 90 bars
  • Up
  • Down
  • MA20
  • MA50
empty
  • Up
  • Down