Donut Chart · CropWatch UI

CwDonutChart

SVG donut with hover interaction, a center total and a legend. Segment colours come from the shared categorical chart palette, so they match the other charts in both themes.

Sizes

Default (200px)

Larger and thinner

No legend

<CwDonutChart {segments} size={280} thickness={30} />

<!-- Skeleton ring while loading; the no-data overlay shows automatically
     when segments are empty or add up to 0 -->
<CwDonutChart segments={data} loading={isLoading} />

Loading and no data

Empty segments

No data available

All values zero

No data available

API

Usage and API reference

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

Model your data as labeled totals Each segment needs a `label` and `value`, with optional `color` when the defaults are not enough.
Tune size for the container Use `size` to fit the available space and `thickness` to control how heavy or airy the ring looks.
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

API	Type	Details
`segments` Required	`CwDonutSegment[]`	Chart segments to render.
`size` Default: `200`	`number`	SVG width and height in pixels.
`thickness` Default: `40`	`number`	Ring stroke width in pixels.
`showLegend` Default: `true`	`boolean`	Shows or hides the legend beneath the chart.
`noData`	`string \| boolean`	When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No data available".
`segment.color`	`string`	Optional per-segment CSS color override.
`loading` Default: `false`	`boolean`	Shows a skeleton ring and sets `aria-busy` while data loads.
`locale`	`string`	BCP 47 locale for number and date formatting. Defaults to the runtime locale.
`decimals`	`number`	Fixed number of fraction digits for displayed values.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Default donut chart

The legend and center total are enabled by default.

<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.

<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}
/>