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 sorted by value.

Basic Example — Traffic sources

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

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

@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"
/>

Design Tokens

See Chart.js adapter — Design Tokens for the color, typography, and grid tokens shared across every Chart.js demo.

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store