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)

<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

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

Decimals per Series

A series names its own decimals with decimals on its dataset. They take the place of valueDecimals for that series: in the tooltip, in the list of a chart's linked points, and on the y-axis that shows it. Counts beside a rate then read 12 and 4.53 rather than 12.00. A series without decimals keeps the chart's valueDecimals. As valueDecimals itself, it is read by the ApexCharts adapter only.

<x-wirekit::chart-mixed
    valueDecimals="2"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['type' => 'bar', 'label' => 'Returned units', 'data' => [12, 18, 9, 22, 15, 11], 'decimals' => 0],
        ['type' => 'line', 'label' => 'Return rate (%)', 'data' => [4.53, 5.1, 3.27, 6.84, 4.9, 3.66]],
    ]"
    :options="[
        'yaxis' => [
            ['title' => ['text' => 'Returned units']],
            ['opposite' => true, 'title' => ['text' => 'Return rate (%)']],
        ],
    ]"
    aria-label="Returned units and the return rate on dual y-axes"
/>

An axis takes the decimals of the series it shows: with one axis for every series, the series in its place, with seriesName, the series it names, and with a single axis, every series, where they all name the same. A tick those decimals would round, a half step on a scale of counts, keeps the form the axis writes without them, so no two ticks read alike.

Three-type combo

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

Further values in the tooltip

The tooltip of a mixed chart can name a value for each point that no series draws: the receipts of a day beside its revenue and its average receipt. tooltipExtras takes a label and one value per point, as on the chart:

<x-wirekit::chart-mixed
    library="apexcharts"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[
        ['type' => 'bar', 'label' => 'Revenue', 'data' => [1240, 980, 1430, 1100, 1675]],
        ['type' => 'line', 'label' => 'Average receipt', 'data' => [25.8, 26.5, 26.0, 26.8, 26.6]],
    ]"
    :options="[
        'yaxis' => [
            ['title' => ['text' => 'Revenue']],
            ['opposite' => true, 'title' => ['text' => 'Average receipt']],
        ],
    ]"
    :tooltip-extras="['label' => 'Receipts', 'data' => [48, 37, 55, 41, 63]]"
    aria-label="Revenue as bars and the average receipt as a line, by weekday"
/>

Props

Accessibility

The two patterns on Chart apply unchanged — label the chart as an image, and give it its data as a table for the full story, which table renders under the chart. 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. --}}
<x-wirekit::chart-mixed
    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."
    :labels="$months"
    :datasets="$datasets"
/>

The label goes on the chart itself, which is the image: a second role="img" around it would make the two one image, and the chart's own name, and the table table renders beside it, would leave the accessibility tree.

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: table writes one column per series, each value as the tooltip writes it — see Offer the data as a table.

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

See Also

• ApexCharts mixed demos for the polished SVG version
• Chart.js advanced patterns for the canvas-based equivalent