Skip to content
Buy
Data & ChartsPro

Bar Chart

Compares categorical data with grouped or stacked bars.

Usage

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import { BarChart } from "@wunderui/react"

Examples

Variants

Grouped, stacked, horizontal, and without grid and axes.

grouped
stacked
horizontal bars · layout="vertical"
showGrid={false} showAxis={false}

Figma variants

All 48 Bar 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

Bar Charts

EarningsTotal Profits
Type 02

Bar Charts

EarningsTotal Profits
Type 03

Bar Charts

Total Profits

Type 04

Bar Charts

Total Profits

Type 05

Bar Charts

Total Profits

Type 06

Bar Charts

Total ProfitsTotal ProfitsTotal Profits
Type 07

Bar Charts

Current Month
Type 08

Bar Charts

Total Profits

Type 09

Bar Charts

Earnings

Type 10

Bar Charts

Earnings

Type 11

Bar Charts

Total Profits
Type 12

Bar Charts

IncomeExpenses
Type 13

Bar Charts

Total Profits

Type 14

Bar Charts

Earnings

Type 15

Bar Charts

Total Profits

Type 16

Bar Charts

Total ProfitsTotal ProfitsTotal Profits
Type 17

Bar Charts

Total Profits
Type 18

Bar Charts

Total Profits

Type 19

Bar Charts

Earnings

Type 20

Bar Charts

Total Profits

Type 21

Bar Charts

Total Profits
Type 22

Bar Charts

Expenses
Type 23

Bar Charts

Total Profits

Type 24

Bar Charts

Total Profits

Type 25

Bar Charts

Earnings

Type 26

Bar Charts

Total Profits

Type 27

Bar Charts

Total Profits

Type 28

Bar Charts

Total Profits
Type 29

Bar Charts

EarningsTotal Profits
Type 30

Bar Charts

Income

Type 31

Bar Charts

Total Profits

Type 32

Bar Charts

Earnings

Type 33

Bar Charts

Total Profits

Type 34

Bar Charts

Income

Type 35

Bar Charts

Total Profits

Type 36

Bar Charts

Total Profits
Type 37

Bar Charts

EarningsTotal Profits
Type 38

Bar Charts

Income

Type 39

Bar Charts

Earnings

Type 40

Bar Charts

Total Profits

Type 41

Bar Charts

Total Profits

Type 42

Bar Charts

Total Profits

Type 43

Bar Charts

Earnings

Type 44

Bar Charts

Total ProfitsIncome
Type 45

Bar Charts

Total ProfitsIncome
Type 46

Bar Charts

Total ProfitsIncomeExpenses
Type 47

Bar Charts

Total ProfitsIncomeExpenses
Type 48

Bar Charts

Total Profits

In context

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

Chart card

Area, bar, line, combined, pie, radar and radial charts and the radial gauge inside the same card.

Revenue

Last 6 months

Revenue vs cost

Grouped by month

Trend

Curved line

Mixed

Bars and line

Traffic sources

Share of sessions

Team profile

Two teams compared

Completion

Radial share

Audience

Share of sessions

  • Audience46%
  • Earnings24%
  • Visitors7%
PreviousArea ChartNextBubble Chart