---
title: Pie + Doughnut
description: Categorical breakdowns — traffic sources, plan distribution, attribution funnels.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/charts-chartjs/bar
  - /components/charts-apex/pie-donut
---

# Pie + Doughnut

Pie charts visualize proportional breakdowns where the parts sum to a meaningful whole. Doughnut charts are pies with a center cutout — same data shape, different visual emphasis.

## When to use

For 2-7 categorical slices that together represent 100% of something. Beyond 7 slices the chart becomes hard to read; switch to a [bar chart](./bar.md) sorted by value.

## Basic Example — Traffic sources

:::preview{title="Traffic-source breakdown (last 30 days)"}
<x-wirekit-chart
    type="pie"
    :labels="['Organic Search', 'Direct', 'Social', 'Referral', 'Email']"
    :datasets="[
        ['data' => [42, 28, 15, 9, 6]],
    ]"
    aria-label="Traffic sources by share"
/>
:::

## Doughnut — Plan distribution

:::preview{title="Active subscribers by plan"}
<x-wirekit-chart
    type="doughnut"
    :labels="['Starter', 'Growth', 'Enterprise', 'Free trial']"
    :datasets="[
        ['data' => [340, 180, 47, 92]],
    ]"
    aria-label="Active subscribers by plan tier"
/>
:::

## Real-world recipe — Attribution funnel

```blade
@php
    $attribution = \App\Models\Lead::query()
        ->selectRaw('attribution_source, COUNT(*) as count')
        ->where('converted_at', '>=', now()->subQuarter())
        ->groupBy('attribution_source')
        ->orderByDesc('count')
        ->pluck('count', 'attribution_source');
@endphp

<x-wirekit-chart
    type="doughnut"
    :labels="$attribution->keys()->all()"
    :datasets="[['data' => $attribution->values()->all()]]"
    height="320px"
    aria-label="Lead attribution by source for the last quarter"
/>
```

## See Also

- [Bar charts](./bar.md) for breakdowns with > 7 categories
- [ApexCharts pie + donut demos](../charts-apex/pie-donut.md) for monochrome / patterned / image-fill variants

## Design Tokens

See [Chart.js adapter — Design Tokens](/components/charts-chartjs#design-tokens) for the color, typography, and grid tokens shared across every Chart.js demo.