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.

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

{{-- 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:

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; if not, install both:

# 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

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

Then pass annotation specs through the annotations prop:

<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
• ApexCharts annotations demos — ApexCharts has annotations built-in (no plugin install)
• ApexCharts streaming demos — same wireStream prop, different imperative API under the hood

#Design Tokens

See Chart.js adapter — Design Tokens for the color, typography, and grid tokens shared across every Chart.js demo.