DonutChart

Charts

An SVG donut (or pie) chart with hover highlights, percentage legend, and a center total label.

Props

Prop	Type	Default	Description
`data`*	`DsDonutChartItem[]`	`–`	Each item: { label, value, color? }.
`thickness`	`number`	`28`	Ring thickness in SVG units. 0 = pie chart.
`radius`	`number`	`70`	Outer radius in SVG units.
`showLegend`	`boolean`	`true`	Show legend with percentages.
`showTotal`	`boolean`	`true`	Show total in center.
`totalLabel`	`string`	`"Total"`	Center sub-label text.
`size`	`number`	`200`	Rendered size in pixels.

Examples

Donut chart

Direct4,20042.0%

Organic2,80028.0%

Referral1,90019.0%

Social1,10011.0%

vue

<DsDonutChart
  :data="[
    { label: 'Direct', value: 4200 },
    { label: 'Organic', value: 2800 },
    { label: 'Referral', value: 1900 },
    { label: 'Social', value: 1100 },
  ]"
  :show-legend="true"
  :show-total="true"
  total-label="Sessions"
/>

Pie chart (thickness: 0)

Direct4,20042.0%

Organic2,80028.0%

Referral1,90019.0%

Social1,10011.0%

vue

<DsDonutChart
  :data="[
    { label: 'Direct', value: 4200 },
    { label: 'Organic', value: 2800 },
    { label: 'Referral', value: 1900 },
    { label: 'Social', value: 1100 },
  ]"
  :show-legend="true"
  :show-total="true"
  total-label="Sessions"
/>

Skeleton

Use DsDonutChartSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsDonutChartSkeleton :size="160" />

Accessibility

Hover tooltip shows label, value and percentage.

BarChart

GaugeChart