Data & Charts
Composed Chart
Combines bars and a trend line in a single chart.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { ComposedChart } from "@wunderui/react"Examples
Bars and line
Bars for cost and a line for revenue on one axis.
Without grid
The same chart without grid lines (showGrid={false}).
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Revenue
An area chart under the headline number and its trend.
Revenue vs cost
Grouped bars with legend chips; hovering a month dims the others.
Trend
A curved line that draws itself in, with the value it ends on.
Mixed
Bars for cost and a line for revenue in one card.
Traffic sources
A donut with its legend; hovering a slice or a legend row puts its share in the middle.
Team profile
Two teams on one radar, with legend chips.
Completion
Radial shares of one goal.
Audience
The radial gauge in the same card.