Data Display

DonutChart

Displays categorical proportions as an accessible donut with an optional center total.

import { DonutChart } from '@lostgradient/cinder/donut-chart';
chart
01

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.

svelte 
<DonutChart
  label="Requests by status"
  data={statuses}
  valueLabels
  onSeriesClick={(datum) => selectStatus(datum)}
/>
Live preview
100Tasks
  • Build 42
  • Review 28
  • Test 18
  • Docs 12
02

When to use

Use when
  • Showing a small number of parts-of-whole categories.
Avoid when
  • Comparing many categories or precise values; use BarChart.
03

Examples

Basic donut chart

A compact breakdown of workload by category.

04

Props

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