Charts

Pro

Bar chart and progress ring that animate with your data. Drag across the bars to read each value while the others dim, with stacked bars, values below zero, a goal line and smooth range switches.

Preview

Installation

npx @lumioui/cli add pro/charts

Usage

import { BarChart, BarChartLegend, ProgressRing } from "@/components/ui/charts/charts";
<Charts />

Also exported: BarChart, BarChartLegend, ProgressRing.

Examples

Bar

A phone-time dashboard (productivity → ink).

Cash flow

A studio's monthly net cash flow (finance → green).

Ring

Mobile data used against a 20 GB plan in a carrier app (teal).

API reference

BarChart

Prop Type Default
data* BarDatum[] —
series BarSeries[]

Stack keys for values. Omit for single bars.

 —
height number

Plot height in pt (excluding header, x labels and range tabs). Default 180.

 180
color string

Single-series fill (hex). Default theme primary.

 —
negativeColor string

Single series: fill for bars below zero (e.g. destructive). Default color.

 —
goal BarChartGoal

Dashed goal / limit line with a label in the right gutter.

 —
domain [number, number]

Fixed value domain. Default fits the data, zero and the goal.

 —
formatValue (value: number) => string

Format values in the header, callout and screen-reader text.

 —
header boolean | BarChartHeader

Built-in reading header above the plot. true uses the defaults.

 —
callout boolean

Floating value bubble over the touched bar. Default true, false with header.

 —
scrubbable boolean

Allow drag-to-read. Default true.

 true
onScrub (reading: BarReading | null) => void

Fires when the read bar or segment changes; null on release.

 —
labelEvery number

Show every nth x label. Default: all up to 12 bars, then about six labels.

 —
ranges readonly string[]

Range tabs under the plot. Swap data on change to reshape the bars.

 —
range string —
defaultRange string —
onRangeChange (range: string) => void —
accessibilityLabel string

Screen-reader summary. Default describes the bars.

 —
className string —

BarChartLegend

Prop Type Default
series* BarSeries[] —
activeIndex number | null

Segment being read — its row stays in ink, the others dim.

 null
className string —

ProgressRing

Prop Type Default
progress* number

0–1 fill fraction. Up to 2: past 1 a second lap runs over the first.

 —
size number

Outer diameter in px. Default 120.

 120
thickness number

Ring thickness in px. Default 12.

 12
color string

Fill color (hex). Defaults to theme primary.

 —
trackColor string

Track color (hex). Defaults to theme muted.

 —
surfaceColor string

Surface behind the ring — cuts the seam where a second lap starts. Default card.

 —
onComplete () => void

Fires once each time the ring reaches full from below.

 —
label string

Screen-reader name ("Data used").

 —
children React.ReactNode

Center content (e.g. a percentage Text, or a rolling AnimatedNumber).

 —
className string —