Component
DonutChart
Donut/pie chart for showing proportions with interactive legend.
tsx
import { DonutChart } from 'wss3-forge'Usage
•
Use for showing parts of a whole
•
Interactive hover on segments and legend
•
Center displays total or hovered percentage
•
Animated segments on mount
•
Responsive: legend moves below on small containers
100
Total
Direct45
Organic30
Referral15
Social10
Examples
Traffic Sources
100
Total
Direct45
Organic30
Referral15
Social10
tsx
1<DonutChart2 data={[3 { label: 'Direct', value: 45, color: '#A35BFF' },4 { label: 'Organic', value: 30, color: '#10b981' },5 { label: 'Referral', value: 15, color: '#3b82f6' },6 { label: 'Social', value: 10, color: '#f59e0b' }7 ]}8 size={160}9/>Compact (No Legend)
100
Total
tsx
1<DonutChart2 data={[3 { label: 'Used', value: 75, color: 'var(--brand-primary)' },4 { label: 'Free', value: 25, color: 'var(--bg-tertiary)' }5 ]}6 size={120}7 thickness={16}8 showLegend={false}9/>Legend Below
100
Total
Desktop60
Mobile30
Tablet10
tsx
1<DonutChart2 data={[3 { label: 'Desktop', value: 60, color: '#A35BFF' },4 { label: 'Mobile', value: 30, color: '#FD9173' },5 { label: 'Tablet', value: 10, color: '#10B981' }6 ]}7 size={140}8 legendBelow9/>Previous
BarChart
Next
LineChart
Last updated: December 2025