# Pie chart

Show a few categories as shares of a total.

## Install

~~~~sh
pnpm dlx @mielui/svelte add pie-chart
~~~~

## Usage

Set Arc innerRadius to 0 for a solid pie and omit Label. Each datum has a stable key and a nonnegative value.

Use a bar chart when small differences matter or when many categories would produce thin slices. The legend provides exact values without relying on color.

Use the [Pie Chart API reference](/docs/components/pie-chart.md) for all exported parts and their props.

## Examples

### Category shares

A solid pie with exact values in its legend and tooltip.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'paid', value: 64 },
        { key: 'trial', value: 24 },
        { key: 'free', value: 12 }
    ];
    const percent = (value: number) => `${value}%`;
    const config = {
        paid: { label: 'Paid', color: 'var(--chart-1)', format: percent },
        trial: { label: 'Trial', color: 'var(--chart-2)', format: percent },
        free: { label: 'Free', color: 'var(--chart-3)', format: percent }
    };
</script>

<PieChart.Root
    {data}
    {config}
    aria-label="Accounts by subscription status"
    animation="none"
    class="w-full max-w-lg"
>
    <PieChart.Legend />
    <PieChart.Plot class="h-64">
        <PieChart.Arc innerRadius={0} cornerRadius={2} padAngle={0.02} />
    </PieChart.Plot>
    <PieChart.Tooltip />
</PieChart.Root>
~~~~

### Continuous motion

Each segment brightens in sequence. Its position and proportion stay fixed.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'product', value: 52 },
        { key: 'engineering', value: 31 },
        { key: 'support', value: 17 }
    ];
    const percent = (value: number) => `${value}%`;
    const config = {
        product: { label: 'Product', color: 'var(--chart-1)', format: percent },
        engineering: { label: 'Engineering', color: 'var(--chart-2)', format: percent },
        support: { label: 'Support', color: 'var(--chart-3)', format: percent }
    };
</script>

<div class="w-full max-w-xl">
    <h3 class="font-medium">Time by team</h3>
    <p class="mt-1 text-sm text-foreground-muted">Share of tracked hours this week.</p>
    <PieChart.Root {data} {config} animation="live" aria-label="Weekly tracked hours by team">
        <PieChart.Plot class="h-72">
            <PieChart.Arc innerRadius={0} cornerRadius={5} padAngle={0.025} />
        </PieChart.Plot>
        <PieChart.Legend />
        <PieChart.Tooltip />
    </PieChart.Root>
</div>
~~~~

### Filter a category

Exclude internal traffic and watch the remaining shares recalculate. Stable keys preserve category identity.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';
    import { Switch } from '@mielui/svelte/components/switch';

    const records = [
        { key: 'search', value: 420 },
        { key: 'direct', value: 280 },
        { key: 'internal', value: 160 }
    ];
    const config = {
        search: { label: 'Search', color: 'var(--chart-1)' },
        direct: { label: 'Direct', color: 'var(--chart-2)' },
        internal: { label: 'Internal', color: 'var(--chart-3)' }
    };

    let includeInternal = $state(true);

    const data = $derived(records.filter((item) => includeInternal || item.key !== 'internal'));
</script>

<div class="w-full max-w-lg space-y-4">
    <Switch bind:checked={includeInternal} label="Include internal traffic" />
    <PieChart.Root {data} {config} aria-label="Traffic sources">
        <PieChart.Plot>
            <PieChart.Arc innerRadius={0} />
        </PieChart.Plot>
        <PieChart.Tooltip />
        <PieChart.Legend>
            {#snippet children({ label, percentage })}
                <span>{label}</span>
                <span class="tabular-nums text-foreground">{percentage.toFixed(1)}%</span>
            {/snippet}
        </PieChart.Legend>
    </PieChart.Root>
</div>
~~~~

For the rendered guide, visit [Pie chart](/docs/components/pie-chart/pie).