Skip to main content
WireKit
Copy for LLM

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

See Also

Design Tokens

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