---
title: Advanced
description: Multi-axis charts, wire:streaming live updates, and the annotations plugin.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/chart
---

# Advanced

Three patterns that go beyond the basic chart-type families: multi-axis dashboards, real-time data streaming via Livewire, and chart annotations.

## Multi-axis dashboards — `<x-wirekit::chart-mixed>`

When two metrics have wildly different scales (revenue in € vs growth percentage), a single y-axis squashes one of them. `<x-wirekit::chart-mixed>` lets each dataset declare its own type AND its own y-axis target via `yAxisID`.

:::preview{title="Revenue (€) bars + growth (%) line, dual y-axis"}
<x-wirekit::chart-mixed
    :labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q5']"
    :datasets="[
        [
            'type' => 'bar',
            'label' => 'Revenue (€K)',
            'data' => [42, 58, 71, 89, 104],
            'yAxisID' => 'y',
        ],
        [
            'type' => 'line',
            'label' => 'Growth (%)',
            'data' => [12, 38, 22, 25, 17],
            'yAxisID' => 'y1',
        ],
    ]"
    :options="[
        'scales' => [
            'y'  => ['type' => 'linear', 'position' => 'left',  'title' => ['display' => true, 'text' => 'Revenue (€K)']],
            'y1' => ['type' => 'linear', 'position' => 'right', 'grid' => ['drawOnChartArea' => false], 'title' => ['display' => true, 'text' => 'Growth (%)']],
        ],
    ]"
    aria-label="Quarterly revenue with growth-rate overlay"
/>
:::

The Chart.js convention `'grid' => ['drawOnChartArea' => false]` on the secondary axis prevents two grid systems from overlapping.

## wire:streaming live updates

Subscribe a chart to a Livewire-emitted event and pipe each fired payload into the live chart instance — without re-rendering the page.

```blade
{{-- Livewire-server-side event source --}}
{{-- $this->dispatch('cpu.sample', point: 67.4); --}}

<x-wirekit-chart
    type="line"
    :labels="$initialLabels"
    :datasets="[['label' => 'CPU (%)', 'data' => $initialData]]"
    wireStream="cpu.sample"
    wireStreamMode="strict"
    :wireStreamCap="60"
    height="260px"
/>
```

Three configuration props:

| Prop | Default | Purpose |
|---|---|---|
| `wireStream` | `null` | Event name. When set, the chart subscribes; when null, no streaming. |
| `wireStreamMode` | `'strict'` | `'strict'` shifts FIFO at `wireStreamCap`; `'stream'` grows unbounded. |
| `wireStreamCap` | `100` | Max points per dataset under `'strict'`. |

The handler accepts payloads in two shapes:

- `{ point: 67.4 }` — appended to dataset 0
- `{ datasetIndex: 1, point: 12.3 }` — appended to a specific dataset for multi-series streams

When the Alpine component is destroyed (Livewire SPA navigation, x-cloak teardown), the window listener is automatically removed.

## Annotations layer

Chart.js annotations require the `chartjs-plugin-annotation` plugin on top of Chart.js itself. This page assumes you already completed the [Chart.js requirements](/components/chart#requirements); if not, install both:

```bash
# 1. The base library — already present if you followed the Chart setup page.
npm install chart.js

# 2. The annotation plugin this section adds on top.
npm install chartjs-plugin-annotation
```

```js
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
```

Then pass annotation specs through the `annotations` prop:

```blade
<x-wirekit-chart
    type="line"
    :labels="$days"
    :datasets="$revenue"
    :annotations="[
        ['type' => 'vline',  'xMin' => 'Apr 12', 'xMax' => 'Apr 12', 'borderColor' => 'var(--color-wk-accent)', 'borderWidth' => 2, 'label' => ['enabled' => true, 'content' => 'Pricing change']],
        ['type' => 'box',    'yMin' => 50000,    'yMax' => 70000,    'backgroundColor' => 'rgba(34, 197, 94, 0.1)', 'label' => ['enabled' => true, 'content' => 'Target zone']],
    ]"
/>
```

When the plugin is missing, the chart still renders without annotations — the Alpine factory emits a `console.warn` with the install hint so the cause is visible in DevTools.

## See Also

- [`<x-wirekit::chart-mixed>` component reference](/components/chart#mixed)
- [ApexCharts annotations demos](../charts-apex/annotations.md) — ApexCharts has annotations built-in (no plugin install)
- [ApexCharts streaming demos](../charts-apex/streaming.md) — same wireStream prop, different imperative API under the hood

## Design Tokens

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