Charts

PieChart

Proportional data as pie, donut or Nightingale rose, with an optional center label.

<script>
  import { PieChart } from "@codeatlasdev/ui/charts";
</script>

<PieChart data={[{ name: "Cloud", value: 38 }, { name: "SaaS", value: 24 }]} donut />

Basic donut

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
  import { PieChart } from '@codeatlasdev/ui/charts';

  const marketData = [
    { value: 38, name: 'Cloud Services' },
    { value: 24, name: 'Enterprise SW' },
    { value: 18, name: 'SaaS Tools' },
    { value: 12, name: 'Infrastructure' },
    { value: 8, name: 'Other' },
  ];
</script>

<GlassCard full><PieChart data={marketData} donut height="300px" /></GlassCard>

Donut with center KPI

centerLabel overlays a value and caption in the hole of a donut.

$2.4M Total Revenue

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
  import { PieChart } from '@codeatlasdev/ui/charts';

  const marketData = [
    { value: 38, name: 'Cloud Services' },
    { value: 24, name: 'Enterprise SW' },
    { value: 18, name: 'SaaS Tools' },
    { value: 12, name: 'Infrastructure' },
    { value: 8, name: 'Other' },
  ];
</script>

<GlassCard full>
  <PieChart data={marketData} donut centerLabel={{ value: '$2.4M', label: 'Total Revenue' }} height="300px" />
</GlassCard>

Rose chart

Nightingale rose: the radius of each slice scales with its value.

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
  import { PieChart } from '@codeatlasdev/ui/charts';

  const roseData = [
    { value: 72, name: 'Analytics' },
    { value: 58, name: 'Automation' },
    { value: 45, name: 'Security' },
    { value: 38, name: 'Integrations' },
    { value: 30, name: 'Storage' },
    { value: 22, name: 'Support' },
  ];
</script>

<GlassCard full><PieChart data={roseData} rose height="340px" /></GlassCard>

Animated proportions

Swap the data and the slices animate to the new proportions.

Q1 Q2 Q3

Code

<script lang="ts">
  import { GlassCard, Row, Chip } from '@codeatlasdev/ui';
  import { PieChart } from '@codeatlasdev/ui/charts';

  type Quarter = 'Q1' | 'Q2' | 'Q3';
  const quarters: Quarter[] = ['Q1', 'Q2', 'Q3'];
  const qData: Record<Quarter, { value: number; name: string }[]> = {
    Q1: [{ value: 42, name: 'Cloud' }, { value: 28, name: 'Enterprise' }, { value: 18, name: 'SaaS' }, { value: 12, name: 'Other' }],
    Q2: [{ value: 35, name: 'Cloud' }, { value: 31, name: 'Enterprise' }, { value: 22, name: 'SaaS' }, { value: 12, name: 'Other' }],
    Q3: [{ value: 38, name: 'Cloud' }, { value: 26, name: 'Enterprise' }, { value: 24, name: 'SaaS' }, { value: 12, name: 'Other' }],
  };

  let selected = $state<Quarter>('Q1');
  const data = $derived(qData[selected]);
</script>

<div class="wrap">
  <Row gap={8}>
    {#each quarters as q}
      <Chip label={q} selected={selected === q} onclick={() => (selected = q)} variant="brand" size="sm" />
    {/each}
  </Row>
  <GlassCard full><PieChart {data} donut height="300px" /></GlassCard>
</div>

<style>
  .wrap { width: 100%; display: flex; flex-direction: column; gap: var(--ca-space-3); }
</style>

Props

Prop	Type	Default	Description
`data`	`ChartSlice[]`	–	Slices as { name, value }.
`donut`	`boolean`	`false`	Renders a ring instead of a solid pie.
`rose`	`boolean`	`false`	Nightingale rose, where the slice radius scales with the value.
`centerLabel`	`{ value: string; label: string }`	–	Text centered in a donut, such as a KPI total. Use with donut.
`height`	`string`	`'300px'`	CSS height of the chart.
`class`	`string`	`''`	Extra class names.