---
title: Mixed
description: Multi-axis dashboards with line+column, line+area, and dual y-axis combinations.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-chartjs/advanced
---

# 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)

:::preview{title="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

:::preview{title="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

```blade
@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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Chart.js multi-axis](../charts-chartjs/advanced.md#multi-axis-dashboards--x-wirekitchart-mixed) for the same pattern on the alternative adapter
- [`<x-wirekit::chart-mixed>` component reference](/components/chart-mixed) (forthcoming)

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.