Donut Chart — Cinder component documentation

Overview

DonutChart visualizes a small set of part-to-whole values. It exposes visible value labels, an optional center label, series activation, and a horizontal-scroll escape hatch for narrow containers.

Use a bar chart when precise comparison matters more than the part-to-whole relationship.

Usage

<script lang="ts">
  import { DonutChart } from '@lostgradient/cinder/donut-chart';

  const data = [
    { label: 'Build', value: 42 },
    { label: 'Review', value: 28 },
    { label: 'Test', value: 18 },
    { label: 'Docs', value: 12 },
  ];
</script>

<DonutChart label="Workload" {data} centerLabel="Tasks" valueLabels />

Live preview

Build 42
Review 28
Test 18
Docs 12

When to use

Use when

Showing a small number of parts-of-whole categories.

Avoid when

Comparing many categories or precise values; use BarChart.

Examples

Basic donut chart

A compact breakdown of workload by category.

Props

Props for donut-chart
Name	Type	Default
`label` required	`text`
`data` required	`DonutChartDatum[]`
`valueLabels`	`boolean`	`false`
`centerLabel`	`text`
`scrollable`	`boolean`	`false`
`onSeriesClick`	`(datum: DonutChartDatum, index: number) => void`