Component

LineChart

Line chart for showing trends over time with smooth curves and tooltips.

tsx

import { LineChart, MultiLineChart, Sparkline } from 'wss3-forge'

Usage

•

Use for trend visualization over time

•

MultiLineChart for comparing multiple series

•

Sparkline for compact inline charts

•

Automatic area gradient fill

Examples

Simple Line Chart

tsx

1<LineChart
2  data={[30, 45, 35, 60, 50, 75, 65]}
3  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
4  height={160}
5  color="var(--brand-primary)"
6/>

With Axis Labels

250218185153120

JanFebMarAprMayJunJul

tsx

1<LineChart
2  data={[120, 180, 150, 220, 190, 250, 230]}
3  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
4  height={180}
5  showXLabels
6  showYLabels
7  gridLines={5}
8/>

Without Grid

tsx

1<LineChart
2  data={[40, 65, 50, 80, 70, 95]}
3  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
4  height={140}
5  showGrid={false}
6  color="#10b981"
7/>

Multi-Line Chart

Revenue

Expenses

tsx

1<MultiLineChart
2  series={[
3    { name: 'Revenue', data: [100, 120, 140, 130, 160, 180], color: 'var(--brand-primary)' },
4    { name: 'Expenses', data: [80, 90, 100, 95, 110, 120], color: '#ef4444' }
5  ]}
6  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
7  height={180}
8/>

Sparklines

Revenue

+12%

Churn

-8%

tsx

1<HStack gap="xl" style={{ alignItems: 'center' }}>
2  <VStack gap="xs">
3    <Text size="sm" color="muted">Revenue</Text>
4    <HStack gap="sm" style={{ alignItems: 'center' }}>
5      <Sparkline data={[20, 35, 25, 45, 40, 60]} trend="up" />
6      <Text size="sm" style={{ color: 'var(--success)' }}>+12%</Text>
7    </HStack>
8  </VStack>
9  <VStack gap="xs">
10    <Text size="sm" color="muted">Churn</Text>
11    <HStack gap="sm" style={{ alignItems: 'center' }}>
12      <Sparkline data={[50, 45, 55, 40, 35, 30]} trend="down" />
13      <Text size="sm" style={{ color: 'var(--error)' }}>-8%</Text>
14    </HStack>
15  </VStack>
16</HStack>

DonutChart

ProgressRing

Last updated: December 2025