Proportional composition ring with center label, legend, and per-slice colors.
LegendCenter label
import { DonutChart } from '@chanrg/4ui/echarts';<DonutChart slices={[{ name: 'us-east-1', value: 62 }]} unit="%" centerLabel="Traffic" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { DonutChart } from '@chanrg/4ui';import { DonutChart } from '@chanrg/4ui/echarts';<DonutChart slices={[{ name: 'us-east-1', value: 62 }]} unit="%" centerLabel="Traffic" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
slices | { name, value, color? }[] | [] | Ring segments. |
centerLabel | string | — | Text inside the ring. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Legend carries the names; keep values available as text nearby.