Bar Chart
Compares categorical data with grouped or stacked bars.
Usage
Installation
Bar Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then import what you need:
import { BarChart } from "@wunderui/react"Examples
Grouped
Two series side by side per month.
Stacked
Two series in one bar per month (stacked).
Horizontal bars
The bars run left to right (layout="vertical").
Without grid and axes
Only the bars: showGrid={false} and showAxis={false}.
Type 01
All 48 Bar 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
Type 27
Type 28
Type 29
Type 30
Type 31
Type 32
Type 33
Type 34
Type 35
Type 36
Type 37
Type 38
Type 39
Type 40
Type 41
Type 42
Type 43
Type 44
Type 45
Type 46
Type 47
Type 48
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.