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

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

Design Tokens

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

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store