Streaming

Subscribe a chart to a Livewire-emitted event and pipe each fired payload into the live ApexCharts instance via chart.appendData(). The same <x-wirekit-chart wireStream="..."> API works with both adapters; the imperative-update path differs internally.

Live demos

The previews below stream pseudo-random data through the same wire-streaming pipeline a production app uses. Watch each chart's series grow over time as the live ticker fires events into it.

Single-series live ticker — 1s cadence

<div data-stream-config='{"event":"wirekit:demo-stream-cpu","interval":1000,"series":1,"range":[40,80]}' style="display: block; width: 100%;">
    <x-wirekit-chart
        library="apexcharts"
        type="line"
        :labels="[]"
        :options="['chart' => ['animations' => ['easing' => 'linear', 'dynamicAnimation' => ['enabled' => true, 'speed' => 950]]], 'xaxis' => ['labels' => ['show' => false], 'axisTicks' => ['show' => false], 'range' => 40], 'yaxis' => ['decimalsInFloat' => 2]]"
        :datasets="[['label' => 'CPU (%)', 'data' => [52, 56, 49, 61, 58, 64, 55, 60, 57, 62]]]"
        valueDecimals="2"
        valueSuffix=" %"
        wireStream="wirekit:demo-stream-cpu"
        wireStreamMode="strict"
        :wireStreamCap="40"
        aria-label="Live CPU utilization streaming chart"
    />
</div>

Multi-series streaming — 3 latency percentiles, 750ms cadence

<div data-stream-config='{"event":"wirekit:demo-stream-latency","interval":750,"series":3,"range":[40,200]}' style="display: block; width: 100%;">
    <x-wirekit-chart
        library="apexcharts"
        type="line"
        :labels="[]"
        :options="['chart' => ['animations' => ['easing' => 'linear', 'dynamicAnimation' => ['enabled' => true, 'speed' => 700]]], 'xaxis' => ['labels' => ['show' => false], 'axisTicks' => ['show' => false], 'range' => 40], 'yaxis' => ['decimalsInFloat' => 2]]"
        :datasets="[
            ['label' => 'p50', 'data' => [45, 48, 52, 49, 51, 47, 50, 53, 48, 49]],
            ['label' => 'p95', 'data' => [120, 132, 128, 145, 138, 142, 135, 128, 140, 144]],
            ['label' => 'p99', 'data' => [180, 195, 188, 210, 205, 198, 215, 200, 192, 208]],
        ]"
        valueDecimals="2"
        valueSuffix=" ms"
        wireStream="wirekit:demo-stream-latency"
        wireStreamMode="strict"
        :wireStreamCap="40"
        aria-label="Live three-percentile latency streaming chart"
    />
</div>

Slow-cadence sales ticker — 2s interval

<div data-stream-config='{"event":"wirekit:demo-stream-sales","interval":2000,"series":1,"range":[10,50]}' style="display: block; width: 100%;">
    <x-wirekit-chart
        library="apexcharts"
        type="line"
        :labels="[]"
        :options="['chart' => ['animations' => ['easing' => 'linear', 'dynamicAnimation' => ['enabled' => true, 'speed' => 1900]]], 'xaxis' => ['labels' => ['show' => false], 'axisTicks' => ['show' => false], 'range' => 40], 'yaxis' => ['decimalsInFloat' => 2]]"
        :datasets="[['label' => 'Sales / minute', 'data' => [22, 28, 31, 25, 33, 29, 36, 30, 27, 32]]]"
        valueDecimals="2"
        wireStream="wirekit:demo-stream-sales"
        wireStreamMode="strict"
        :wireStreamCap="40"
        aria-label="Live sales-per-minute streaming chart"
    />
</div>

The X-axis labels are hidden on every streaming preview (xaxis.labels.show: false). Reason: with a rolling FIFO window — once wireStreamCap is reached, every new point bumps the oldest off the left edge — any static category label set at mount time goes stale within the first cycle. Either the labels need to update in lockstep with the data shift (real-app responsibility: pass xaxis.categories per-tick alongside the value), or they should be absent. The streaming previews opt for absent so the visible axis stays honest. The y-axis + legend still carry the chart's meaning; the x-axis just represents "time flowing right" without a calibrated tick label.

The pseudo-data ticker that drives these previews is documented in docs.wirekit.app's streaming-demo.js shim — same wire-streaming pipeline a production Livewire app would feed via $this->dispatch(...). Match the chart's wireStream="…" to the event name in the wrapper's data-stream-config="event" field; everything else flows automatically.

Setup — Server-side event source

In your Livewire component:

public function pushSample(float $value): void
{
    $this->dispatch('cpu.sample', point: $value);
}

In your view:

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

The Alpine factory listens for cpu.sample events, calls chart.appendData([{ data: [point] }]), and (under strict mode) trims the oldest point so the visible window stays at wireStreamCap = 60 points.

Three configuration props

Prop	Default	Purpose
`wireStream`	`null`	Event name. When set, the chart subscribes; when null, no streaming behavior.
`wireStreamMode`	`'strict'`	`'strict'` shifts FIFO at `wireStreamCap`; `'stream'` grows unbounded — developer's responsibility to trim.
`wireStreamCap`	`100`	Max points per series under `'strict'`.

Multi-series streaming

When the payload includes datasetIndex, the point is appended to the matching series instead of dataset 0:

<x-wirekit-chart
    type="line"
    :labels="$labels"
    :datasets="[
        ['label' => 'p50', 'data' => $p50Initial],
        ['label' => 'p95', 'data' => $p95Initial],
        ['label' => 'p99', 'data' => $p99Initial],
    ]"
    wireStream="latency.sample"
    :wireStreamCap="120"
/>

// Server-side dispatch:
$this->dispatch('latency.sample', datasetIndex: 0, point: 45);  // p50
$this->dispatch('latency.sample', datasetIndex: 1, point: 220); // p95
$this->dispatch('latency.sample', datasetIndex: 2, point: 580); // p99

Real-world recipe — Polling for samples

<div wire:poll.5s="emitLatencySamples">
    <x-wirekit-chart
        type="line"
        :labels="$buckets"
        :datasets="$datasets"
        wireStream="latency.sample"
        wireStreamMode="strict"
        :wireStreamCap="120"
        height="280px"
    />
</div>

public function emitLatencySamples(): void
{
    $sample = \App\Metrics\Api::currentLatencyPercentiles();
    $this->dispatch('latency.sample', datasetIndex: 0, point: $sample->p50);
    $this->dispatch('latency.sample', datasetIndex: 1, point: $sample->p95);
    $this->dispatch('latency.sample', datasetIndex: 2, point: $sample->p99);
}

The wire:poll.5s directive triggers the server-side method every 5 seconds; each dispatch fires the matching client-side listener and appends one point to each series.

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

Design Tokens

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