Data & ChartsPro

Progress Chart

Progress chart for quotas and goals: meters, a segmented bar and a waffle.

Usage

Progress Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import {
  ProgressChart,
  ProgressChartProps,
  ProgressChartVariant,
} from "@wunderui/react"

Savings goal, data table
name	Value
Saved	68%

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Included usage per resource with alerts.

Setup progress and the checklist with status badges.

5 of 10 steps done

A waffle for one savings pot and progress per pot.

Holiday fund, data table
name	Value
Saved	68%

Prop	Type	Default
variant	"meter" \| "segmented-progress" \| "waffle"	"meter"
data	Record<string, unknown>[]	—
index	string	—
value	string	"value"
colors	ChartColor[]	—
height	number	280
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries	string[]	—
activeIndex / defaultActiveIndex	number \| null	—
valueFormatter	(v: number) => string	—
animate · animationKey	boolean · string \| number	—
max	number	100
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
emptyDescription	string	—
emptyTitle	string	—
errorDescription	string	—
errorTitle	string	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
tooltip	boolean	—
width	number	—

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.