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.

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