Chart Mixed

<x-wirekit::chart-mixed> renders a chart where each dataset carries its OWN type (line / bar / area) plus an optional yAxisID pointing at a multi-axis configuration. Both adapters consume the per-dataset type field natively. Chart.js renders bar as vertical bars by default; ApexCharts renders horizontal bars by default and accepts an explicit column synonym for vertical bars at the chart level — to keep examples portable we use bar and let each adapter render its native default.

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

Quarterly revenue with growth-rate overlay

<x-wirekit::chart-mixed
    :labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q1+1']"
    :datasets="[
        ['type' => 'bar', 'label' => 'Revenue (€K)', 'data' => [42, 58, 71, 89, 104]],
        ['type' => 'line',   'label' => 'Growth (%)',   'data' => [12, 38, 22, 25, 17]],
    ]"
    aria-label="Revenue with growth-rate overlay"
/>

Multi-axis Example

Dual y-axis — left for revenue, right for growth %

<x-wirekit::chart-mixed
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['type' => 'bar', 'label' => 'Revenue (€K)', 'data' => [42, 48, 51, 78, 89, 104]],
        ['type' => 'line',   'label' => 'Growth (%)',   'data' => [12, 14, 6, 53, 14, 17]],
    ]"
    :options="[
        'yaxis' => [
            ['title' => ['text' => 'Revenue (€K)']],
            ['opposite' => true, 'title' => ['text' => 'Growth (%)']],
        ],
    ]"
    aria-label="Revenue and growth on dual y-axes"
/>

Three-type combo

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

<x-wirekit::chart-mixed
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['type' => 'bar', '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"
/>

License note

When the active library is ApexCharts (charts.library => 'apexcharts'), the ApexCharts non-MIT license terms apply — see the License section on the Chart overview page for the full details. WireKit's Chart Mixed glue (this component) is MIT-licensed regardless of which adapter is active.

Props

Prop	Type	Default	Description
`labels`	array	`[]`	X-axis labels
`datasets`	array	`[]`	Each entry must include `type` + `data`; optional `yAxisID` for multi-axis binding
`options`	array	`[]`	Adapter-specific options (e.g. `yaxis` array for multi-axis)
`height`	string	`'380px'`	CSS height
`scope`	string\|null	`null`	Personalization scope
`library`	string\|null	`null`	Per-instance chart-library override. Forwards to the underlying `<x-wirekit-chart>` — see `chart` Props.
`wireStream`	string\|null	`null`	Livewire event name to append points from. Mirrors the `chart` prop of the same name
`wireStreamMode`	string	`'strict'`	How a malformed streamed point is handled — see `chart` Props
`wireStreamCap`	int	`100`	Maximum points retained while streaming; the oldest are dropped
`annotations`	array	`[]`	Annotation definitions forwarded to the underlying chart
`inline`	bool	`false`	Render without the surrounding card chrome
`replayable`	bool	`false`	Expose a replay control for the entrance animation

Accessibility

The two patterns on Chart apply unchanged — label the chart as an image, and give it a visually-hidden data table for the full story. A mixed chart adds one thing to the label.

It carries more than one series and often more than one axis, so the label has to say which is which. "Revenue and growth" leaves a reader guessing whether the line is the growth rate or a second currency figure, and the axis it belongs to is exactly what the picture communicates and the words do not.

{{-- 1. Name each series, its shape, and the axis it reads against. --}}
<div role="img" aria-label="Revenue as bars against the left axis in euros, growth rate as a line against the right axis in percent, January to December 2025.">
    <x-wirekit-chart type="mixed" :labels="$months" :datasets="$datasets" />
</div>

With three or more series a label stops being readable. At that point the data table is not the thorough option, it is the only one — see Chart.

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

Don't mix radically different scales without a multi-axis configuration. A column with values in the millions and a line with values in single digits will compress the line to invisibility on a single y-axis.
Validate every dataset has a data array. The component throws InvalidArgumentException for malformed input — better to fail loudly than render silently broken charts.

Design Tokens

Mixed charts compose multiple series types in a single canvas — bar + line, area + line, scatter + line, etc. Per-series styling reads the same WireKit color palette as the base Chart component: --color-wk-accent, --color-wk-success, --color-wk-warning, --color-wk-danger, --color-wk-info for the dataset colors; --color-wk-text / --color-wk-text-muted for legend + axis labels; --color-wk-border for the grid; --font-wk-sans for typography.

Dark mode swaps the entire palette atomically when the .dark class toggles on <html> (same MutationObserver re-paint as the single-type charts).