ziyarago/ui DonutChart Pro
Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.
Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre formatted like the axes, and a legend toggle.
Import
Vue
import { UiDonutChart } from '@ziyarago/ui-pro/vue'Four shares (UZS)
| Name | Value | Share |
|---|---|---|
| Direct | UZS 48,200,000 | 45% |
| Marketplace | UZS 31,400,000 | 29% |
| Partners | UZS 17,900,000 | 17% |
| Social | UZS 9,300,000 | 8.7% |
Vue
<UiDonutChart
:data="[{ key: 'direct', label: 'Direct', value: 48200000, tone: 'brand' }, { key: 'market', label: 'Marketplace', value: 31400000, tone: 'info' }, { key: 'partners', label: 'Partners', value: 17900000, tone: 'success' }, { key: 'social', label: 'Social', value: 9300000, tone: 'warning' }]"
unit="currency"
currency="UZS"
label="Sales by channel"
/>Percent
| Name | Value | Share |
|---|---|---|
| Paid | 72% | 72% |
| Pending | 21% | 21% |
| Failed | 7% | 7% |
Vue
<UiDonutChart
:data="[{ key: 'a', label: 'Paid', value: 72 }, { key: 'b', label: 'Pending', value: 21 }, { key: 'c', label: 'Failed', value: 7 }]"
unit="percent"
/>Single slice
| Name | Value | Share |
|---|---|---|
| Direct | 120 | 100% |
Vue
<UiDonutChart :data="[{ key: 'a', label: 'Direct', value: 120 }]" />All zeros
No data for this period
Vue
<UiDonutChart
:data="[{ key: 'a', label: 'Direct', value: 0 }, { key: 'b', label: 'Partners', value: 0 }]"
/>Empty
No data for this period
Vue
<UiDonutChart :data="[]" />
Loading
Vue
<UiDonutChart :data="[]" loading />
Sizes
| Name | Value | Share |
|---|---|---|
| Direct | 48,200,000 | 45% |
| Marketplace | 31,400,000 | 29% |
| Partners | 17,900,000 | 17% |
| Social | 9,300,000 | 8.7% |
| Name | Value | Share |
|---|---|---|
| Direct | 48,200,000 | 45% |
| Marketplace | 31,400,000 | 29% |
| Partners | 17,900,000 | 17% |
| Social | 9,300,000 | 8.7% |
| Name | Value | Share |
|---|---|---|
| Direct | 48,200,000 | 45% |
| Marketplace | 31,400,000 | 29% |
| Partners | 17,900,000 | 17% |
| Social | 9,300,000 | 8.7% |
Vue
<UiDonutChart
:data="[{ key: 'direct', label: 'Direct', value: 48200000, tone: 'brand' }, { key: 'market', label: 'Marketplace', value: 31400000, tone: 'info' }, { key: 'partners', label: 'Partners', value: 17900000, tone: 'success' }, { key: 'social', label: 'Social', value: 9300000, tone: 'warning' }]"
size="xs"
:legend="false"
/>
<UiDonutChart
:data="[{ key: 'direct', label: 'Direct', value: 48200000, tone: 'brand' }, { key: 'market', label: 'Marketplace', value: 31400000, tone: 'info' }, { key: 'partners', label: 'Partners', value: 17900000, tone: 'success' }, { key: 'social', label: 'Social', value: 9300000, tone: 'warning' }]"
size="sm"
:legend="false"
/>
<UiDonutChart
:data="[{ key: 'direct', label: 'Direct', value: 48200000, tone: 'brand' }, { key: 'market', label: 'Marketplace', value: 31400000, tone: 'info' }, { key: 'partners', label: 'Partners', value: 17900000, tone: 'success' }, { key: 'social', label: 'Social', value: 9300000, tone: 'warning' }]"
size="md"
:legend="false"
/>API reference
Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.
Props
PropType and valuesDefaultDescription
datarequired{ key: string; label: string; value: number; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' }[]—Slices. Only positive values draw; others keep their legend row at 0. All zero or empty shows the empty state.unitcountcurrencypercent'count'Number format of the value axis, tooltip and centre total. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).currencystring—ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.yFormat(n: number) => string—Custom formatter for every number (axis, tooltip, total). Overrides unit and currency.localestring—BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.dirltrrtl—Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).labelstring—Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.heightnumber—Diameter in px. Overrides size.sizexssmmdlgxl'md'Preset diameter: xs 120, sm 160, md 200, lg 240, xl 300 px.loadingbooleanfalseShows a skeleton in the shape of the chart.emptyTextstring—Text of the empty state. Default is the translated "No data for this period".emptyIconstring—Icon name shown above the empty text. None by default.legendbooleantrueText legend of toggle buttons (aria-pressed). A button hides and shows its slice; the scale is recomputed.Events
Vue: @name. React: onName.
pointClickClick or Enter on a slice. Called with { key, label, value, share, index }; share is 0 to 1.legendToggleA legend button was pressed. Called with { key, label, hidden } where hidden is the new state.Notes
- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.