---
title: Pie + Donut
description: Categorical breakdowns with monochrome, patterned, and image-fill variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/radial-bar
  - /components/charts-chartjs/pie-doughnut
---

# Pie + Donut

ApexCharts uses the spelling `donut` (not `doughnut` — Chart.js convention). WireKit's adapter accepts both via the `mapType()` rename: `<x-wirekit-chart type="doughnut">` is normalized to `donut` inside the adapter, so developer snippets work cross-adapter.

## Basic Example — Traffic sources

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

## Donut — Plan distribution

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

## Monochrome variant

```blade
<x-wirekit-chart
    type="donut"
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[['data' => [42, 58, 71, 89]]]"
    :options="[
        'theme' => ['monochrome' => ['enabled' => true, 'color' => 'var(--color-wk-accent)', 'shadeTo' => 'light']],
    ]"
/>
```

ApexCharts shades each slice from the supplied color towards lighter/darker tones — useful for "single brand color" dashboards where rainbow palettes feel out of place.

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Radial Bar](./radial-bar.md) for KPI gauges + circular dials
- [Chart.js pie + doughnut](../charts-chartjs/pie-doughnut.md)

## Design Tokens

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