---
title: Chart Mixed
description: Multi-type / multi-axis dashboard chart — per-dataset type and y-axis bindings.
visibility: guest
draft: false
related:
  - /components/chart
  - /components/charts-apex/mixed
  - /components/charts-chartjs/advanced
---

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

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

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

:::preview{title="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](https://apexcharts.com/license/) apply — see the [License section on the Chart overview page](/components/chart#license-apexcharts-only) 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](/components/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](/components/chart#design-tokens) 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](/components/charts-apex/mixed) for the polished SVG version
- [Chart.js advanced patterns](/components/charts-chartjs/advanced) for the canvas-based equivalent