Component

BarChart

Bar chart for comparing categorical data with animated bars and tooltips.

tsx

import { BarChart, GroupedBarChart } from 'wss3-forge'

Usage

•

Use for comparing values across categories

•

GroupedBarChart for multiple series comparison

•

Supports horizontal orientation

•

Animated on mount with hover tooltips

120

150

JanFebMarAprMay

Examples

Vertical Bar Chart

120

150

JanFebMarAprMay

tsx

1<BarChart
2  data={[
3    { label: 'Jan', value: 65 },
4    { label: 'Feb', value: 85 },
5    { label: 'Mar', value: 120 },
6    { label: 'Apr', value: 90 },
7    { label: 'May', value: 150 }
8  ]}
9  height={180}
10  color="var(--brand-primary)"
11/>

Horizontal Bar Chart

Chrome

Safari

Firefox

Edge

tsx

1<BarChart
2  data={[
3    { label: 'Chrome', value: 65 },
4    { label: 'Safari', value: 19 },
5    { label: 'Firefox', value: 10 },
6    { label: 'Edge', value: 6 }
7  ]}
8  horizontal
9  color="#10b981"
10/>

Grouped Bar Chart

2023

2024

120

150

110

180

140

200

160

Q1Q2Q3Q4

tsx

1<GroupedBarChart
2  data={[
3    { label: 'Q1', values: [120, 90] },
4    { label: 'Q2', values: [150, 110] },
5    { label: 'Q3', values: [180, 140] },
6    { label: 'Q4', values: [200, 160] }
7  ]}
8  series={[
9    { name: '2023', color: 'var(--brand-primary)' },
10    { name: '2024', color: '#10b981' }
11  ]}
12  height={200}
13/>

Toast

DonutChart

Last updated: December 2025