All examples

Part-whole charts

Pie, donut, treemap and sunburst views with accessible descriptions and expandable data tables in light and dark token palettes.

Part-whole charts

charts-part-whole · charts/part-whole

charts pie
Props
  • data
  • labels
  • root

Live example loads in an isolated same-origin preview frame.

Source (charts-part-whole/entries.ts) 
import { defineExample } from '../registry.ts';

export const chartsPartWholeExample = defineExample({
  id: 'charts-part-whole',
  title: 'Part-whole charts',
  description:
    'Pie, donut, treemap and sunburst views with accessible descriptions and expandable data tables in light and dark token palettes.',
  tags: ['charts', 'pie', 'donut', 'treemap', 'sunburst'],
  component: 'charts/part-whole',
  props: ['data', 'root', 'labels'],
  load: () => import('./PartWholeChartsDemo.svelte'),
});