Mixed

Mixed charts render multiple chart types on the same canvas — one dataset as a column, another as a line, a third as an area. ApexCharts handles this via per-series type fields; WireKit exposes the pattern via <x-wirekit::chart-mixed>.

Basic Example — Revenue (column) + Growth (line)

Quarterly revenue (column) with growth-rate overlay (line)

<x-wirekit::chart-mixed
    library="apexcharts"
    :labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q5']"
    :datasets="[
        [
            'type' => 'column',
            'label' => 'Revenue (€K)',
            'data' => [42, 58, 71, 89, 104],
        ],
        [
            'type' => 'line',
            'label' => 'Growth (%)',
            'data' => [12, 38, 22, 25, 17],
        ],
    ]"
    :options="[
        'yaxis' => [
            ['title' => ['text' => 'Revenue (€K)']],
            ['opposite' => true, 'title' => ['text' => 'Growth (%)']],
        ],
    ]"
    aria-label="Revenue + growth-rate mixed chart"
/>

yaxis as an array creates multiple y-axes; opposite: true on the second entry pins it to the right side. Each series binds to the matching y-axis by index.

Line + Area + Column

Sales pipeline: leads (column) + qualified (area) + won (line)

<x-wirekit::chart-mixed
    library="apexcharts"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        [
            'type' => 'column',
            'label' => 'Leads',
            'data' => [120, 145, 180, 210, 260, 320],
        ],
        [
            'type' => 'area',
            'label' => 'Qualified',
            'data' => [42, 58, 78, 102, 138, 174],
        ],
        [
            'type' => 'line',
            'label' => 'Won',
            'data' => [8, 12, 18, 22, 28, 38],
        ],
    ]"
    aria-label="Sales pipeline mixed chart"
/>

Real-world recipe — Eloquent + multi-axis

@php
    $months = collect(range(0, 11))
        ->map(fn ($i) => now()->subMonths(11 - $i)->format('M'));
    $revenue = \App\Models\Order::monthlyTotals(12);
    $growth = $revenue->map(fn ($v, $i) => $i === 0 ? 0 : round(($v - $revenue[$i - 1]) / $revenue[$i - 1] * 100, 1));
@endphp

<x-wirekit::chart-mixed
    :labels="$months->all()"
    :datasets="[
        ['type' => 'column', 'label' => 'Revenue (€)', 'data' => $revenue->all()],
        ['type' => 'line',   'label' => 'Growth (%)',  'data' => $growth->all()],
    ]"
    :options="['yaxis' => [['title' => ['text' => 'Revenue']], ['opposite' => true, 'title' => ['text' => 'Growth %']]]]"
    height="320px"
/>