Donut Chart

Circular donut chart for part-to-whole comparisons with an optional center label.

Import

ts 
import DonutChart from '$lib/components/DonutChart.svelte';

Usage

Pass an array of slices and an optional centerLabel / centerValue for a KPI display.

100 Total
Video 42
Photo 28
Story 18
Live 12
svelte 
<script lang="ts">
  const slices = [
    { label: 'Video', value: 42 },
    { label: 'Photo', value: 28 },
    { label: 'Story', value: 18 },
    { label: 'Live',  value: 12 },
  ];
</script>

<DonutChart {slices} centerLabel="Total" centerValue="100" />

Ring Thickness

Control the ring width with the thickness prop.

Thin
Video 42
Photo 28
Story 18
Live 12
Thick
Video 42
Photo 28
Story 18
Live 12
svelte 
<!-- Thinner ring -->
<DonutChart {slices} :thickness="28" />

<!-- Thicker ring -->
<DonutChart {slices} :thickness="60" />

Custom Size & Center Value

Shrink the chart with size and show a formatted value in the center.

$48k Revenue
Product A 55
Product B 30
Product C 15
svelte 
<DonutChart {slices} :size="160" centerLabel="Revenue" centerValue="$48k" />

API Reference

PropTypeDefaultDescription
slices DonutSlice[]—Each slice: { label: string, value: number, color?: string }. Values are treated as relative proportions.
size number220Diameter of the donut in pixels.
thickness number44Ring thickness in pixels.
centerLabel string—Small text displayed at the center of the donut.
centerValue string—Large value displayed at the center of the donut.
class string—Extra CSS classes applied to the root element.