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

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

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

<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.