Data & Charts
Column Chart
Vertical bars for comparing categories — the same component as Bar Chart.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { ColumnChart } from "@wunderui/react"Examples
Single series
One column per month.
Grouped
Two series side by side per month.
Stacked
Two series in one column per month (stacked).
Without grid
The columns on their axes, no grid lines (showGrid={false}).
Type 01
All 26 Column Chart cards of the Figma library, one per box, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Replay brings the loading state back.
Type 02
Type 03
Type 04
Type 05
Type 06
Type 07
Type 08
Type 09
Type 10
Type 11
Type 12
Type 13
Type 14
Type 15
Type 16
Type 17
Type 18
Type 19
Type 20
Type 21
Type 22
Type 23
Type 24
Type 25
Type 26
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Weekly signups
New accounts per week in a dashboard card, for the last 6 or 12 weeks.