DonutChart
The share of a whole across a few parts, such as visits by device. Pick it for up to five parts; past that, the smallest fold into one "other" slice, and a bar chart may read better.
- DonutChart
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
Dark theme, DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
High contrast theme, DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
UsageLink to the section Usage
import { DonutChart } from '@skribly/ui/charts'<DonutChart
label="Visits by device"
slices={[
{ id: 'desktop', label: 'Desktop', value: 18_204 },
{ id: 'mobile', label: 'Mobile', value: 9_871 },
{ id: 'tablet', label: 'Tablet', value: 1_204 }
]}
centerLabel="visits"
otherLabel="Other"
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The ring is decoration.
- The legend beside it is a list with every share, name and value in text, and the total sits in the hole as text.
- Pointing at a slice or an entry lights up both, as an extra; nothing is only on hover.
- Slices are split by a gap that stays in forced colours.
- In a narrow box the legend wraps under the ring.
This demo runs through axe in all three themes on every test run. See what the tests check.