CwDonutChart

SVG donut with hover interaction, center label, clickable legend.

Default (200px)

Larger + Thinner

No Legend

CwDonutChart example Copy code 
<CwDonutChart segments={segments} size={280} thickness={30} />
Documentation Upgrade

Start here

CwDonutChart renders proportional segment totals with hover feedback. Build the `segments` array first, then adjust chart size and thickness to fit the layout.

How to think about it

  1. Model your data as labeled totals Each segment needs a `label` and `value`, with optional `color` when the defaults are not enough.
  2. Tune size for the container Use `size` to fit the available space and `thickness` to control how heavy or airy the ring looks.
  3. Hide the legend only in cramped layouts The legend improves readability, so turn it off only when the surrounding UI already labels the segments.

Props and callbacks

APITypeDetails
segments Required
CwDonutSegment[]Chart segments to render.
size

Default: 200

numberSVG width and height in pixels.
thickness

Default: 40

numberRing stroke width in pixels.
showLegend

Default: true

booleanShows or hides the legend beneath the chart.
segment.color
stringOptional per-segment CSS color override.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Default donut chart

The legend and center total are enabled by default.

Default donut chart Copy code 
<script lang="ts">
	const segments = [
		{ label: 'Wheat', value: 340 },
		{ label: 'Corn', value: 280 },
		{ label: 'Soybeans', value: 190 }
	];
</script>

<CwDonutChart {segments} />
Compact chart with custom colors

Useful when you already label the categories elsewhere on the page.

Compact chart with custom colors Copy code 
<script lang="ts">
	const storageSegments = [
		{ label: 'Free', value: 22, color: '#0f766e' },
		{ label: 'Reserved', value: 11, color: '#f59e0b' },
		{ label: 'Used', value: 67, color: '#dc2626' }
	];
</script>

<CwDonutChart
	segments={storageSegments}
	size={160}
	thickness={24}
	showLegend={false}
/>