Data & ChartsPro

Timeline Chart

Timeline chart: a Gantt chart with milestones and a Today line, and an event timeline.

Usage

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

Then import what you need:

tsx

import {
  TimelineChart,
  TimelineChartProps,
  TimelineChartVariant,
} from "@wunderui/react"

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

Weeks of the launch with today's position.

Weeks 40 to 54, today in week 49

Prop	Type	Default
variant	"gantt" \| "event-timeline"	"gantt"
items	{ label, start?, end?, at?, caption?, group? }[]	—
groups · today · todayLabel · domain	groups · number · string · [from, to]	—
timeFormatter	(v: number) => string	—
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries · animate · animationKey	string[] · boolean · string \| number	—
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
domain	readonly [number, number]	—
groups	readonly { key: string; label?: string; color?: ChartColor }[]	—
height	number	—
hiddenSeries	readonly string[]	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
today	number	—
todayLabel	string	"Today"
width	number	—

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