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
Variants
Vertical bars: one series, grouped, stacked, and without grid.
| single |
|---|
| grouped |
|---|
| stacked |
|---|
| showGrid={false} |
|---|
Figma variants
All 26 Column Chart cards of the Figma library, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Hover a card to replay.
Type 01
Column Charts
Type 02
Column Charts
Type 03
Column Charts
Total Profits
Type 04
Column Charts
Income
Type 05
Column Charts
Earnings
Type 06
Column Charts
Type 07
Column Charts
Type 08
Column Charts
Total Profits
Type 09
Column Charts
Total Profits
Type 10
Column Charts
Total Profits
Type 11
Column Charts
Type 12
Column Charts
Type 13
Column Charts
Total Profits
Type 14
Column Charts
Total Profits
Type 15
Column Charts
Total Profits
Type 16
Column Charts
Type 17
Column Charts
Type 18
Column Charts
Total Profits
Type 19
Column Charts
Total Profits
Type 20
Column Charts
Total Profits
Type 21
Column Charts
Type 22
Column Charts
Type 23
Column Charts
Type 24
Column Charts
Type 25
Column Charts
Type 26
Column Charts
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.