Pie + Donut

ApexCharts spells it donut; Chart.js spells it doughnut. WireKit's public vocabulary is the Chart.js spelling — pass type="doughnut" and the adapter's mapType() renames it to donut on the way out, so the same snippet renders under either library. The rename is one-way: donut is not a value the adapter accepts on input, and passing it throws TypeNotSupportedException.

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="doughnut"
    :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.