Stats & Numbers
Donut Breakdown Chart
Shows how a total splits across a handful of categories — revenue by plan, traffic by channel, tickets by type — as a donut with a legend and an exact-value table underneath. Every segment carries a fixed colour, a direct percentage and a legend row at once, so the breakdown reads correctly even for colourblind viewers or screen readers.
$ velocityx add donut-breakdown-chartBuilt for astro.
Full docs for Donut Breakdown Chart →
Needs a licence key —
subscribe here, then
velocityx loginonce.
- Enterprise $48.2k 50%
- Pro $31.4k 33%
- Starter $12.8k 13%
- Trial $4.1k 4%
| Segment | Value | Share |
|---|---|---|
| Enterprise | $48.2k | 50% |
| Pro | $31.4k | 33% |
| Starter | $12.8k | 13% |
| Trial | $4.1k | 4% |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Revenue by plan' | |
| segments | DonutSegment[] | No | [ { label: 'Enterprise', value: 48200, valueText: '$48.2k' }, { label: 'Pro', value: 31400, valueText: '$31.4k' }, { label: 'Starter', value: 12800, valueText: '$12.8k' }, { label: 'Trial', value: 4100, valueText: '$4.1k' }, ] | |
| totalText | string | No | Pre-formatted total centred in the donut. Defaults to the summed value. | |
| totalLabel | string | No | 'Total' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/donut-breakdown-chart/DonutBreakdownChart.astroUsing the Donut Breakdown Chart component
Install it with velocityx add donut-breakdown-chart.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro