Live Charts

Demo & usage

More examples

When to use

• Streaming real-time metrics that update continuously (throughput, prices, sensors).
• You want a sliding window that animates as new points arrive.
• For static historical trends, the standard Line Chart is lighter.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-live-update-chart>

Also in this family — SvLiveUpdateChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-live-update-chart-pro>

Also in this family — SvLiveUpdateChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-live-stream-chart>

Also in this family — SvLiveStreamChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-live-stream-chart-pro>

Also in this family — SvLiveStreamChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-live-stock-chart>

Also in this family — SvLiveStockChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-click-add-point-chart>

Also in this family — SvClickAddPointChartComponent from @styloviz-pro/charts.

Inputs

<sv-live-sort-chart>

Also in this family — SvLiveSortChartComponent from @styloviz-pro/charts.

Inputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `series`, `loading` and `error`.
• Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Streaming spline, OHLC and live-sort modes.
• Every timer-driven variant (live stream in demo mode, live spline, live stock in demo mode, live sort) runs on `createLiveTicker` from `@styloviz/core`: the interval is cleared while its tab is hidden or the user has paused, and re-created when both allow it. The generated variants — spline, demo stock, demo stream — state the gap on the way back once it is long enough to be a hole in the data; live sort owns its data locally and has no feed gap to state.
• The live stream's `push()` and every generator keep their window through `svAppendSample` in `@styloviz/core` (a stock chart given `data` draws the last `windowSize` candles of what the host sent, and the host owns that history). The helper is also there for a host's own feed: a bounded history with a stated retention window, and a policy for a sample that arrives late or twice — keep it in arrival order, refuse it as a retransmission, or insert it where its timestamp belongs. The live stream's `push()` is positional (its readings carry no timestamp), so it keeps arrival order; the demo stock generator refuses a candle not newer than the last.
• The live stream and the live stock chart take `connection`, `reconnectable` and `(reconnect)` — the same streaming vocabulary as the AI activity log — and show the host's state in place of their own LIVE badge.
• Configurable window size and tick interval.
• Click-to-add data points.
• Two variants — click-to-add and live-sort — build their own series from clicks or a timer, so they take no `loading` or `error` input: there is no fetch to be in flight. The streaming variants above take both.

Best practices

• Do: Cap the visible window so the chart doesn't grow unbounded in memory.
• Do: Push readings as they arrive rather than throttling them yourself. The live stream draws at most one point per slide (about 0.88 × `intervalMs`); pushes that land mid-slide are coalesced — the latest wins and is drawn when the slide ends — so a burst costs one extra render, not one per push, and the last reading of a burst is never lost — pressing Pause draws it at once rather than discarding it.
• Do: Report your socket's state through `connection` (`open`, `reconnecting`, `closed`) on the host-fed variants — the live stream, and the live stock chart given `data`. A feed that dropped looks exactly like a quiet one, so only the host can say which; `reconnectable` adds a Reconnect button that emits `reconnect`.
• Do: Leave the background pause alone. Every timer-driven variant clears its interval when its tab is hidden, and never starts one in a tab that opened in the background — not skipping ticks, which in a zone.js host still costs a change-detection pass each — and re-creates it when the tab comes back, which is the difference between a dashboard left open behind another window costing nothing and costing full price for hours. Browsers throttle a hidden tab's timers but do not stop them, and do nothing at all about the work each tick queues.
• Don't: Do not resume a paused feed silently. A chart that picks up where it left off draws a continuous line across a stretch where nothing was sampled — the same claim as interpolating a missing reading, and harder to catch, because the result looks exactly like a chart that ran the whole time. A pause long enough to be a hole in the data is stated under the plot; a two-second tab switch is not, because announcing every one of those would train the reader to ignore the line that matters. The statement is made only when the chart's OWN generator was running and stopped: a host-fed stream, or a stock chart given `data`, kept receiving while hidden — a hidden live stream appends each push straight into its window — so it says nothing.
• Tip: Surface the latest value as text for users who can't track motion.

Accessibility

• A gap the chart's own generator left during a background pause is stated in text under the plot, not left to be inferred from the line. Motion is the one channel a live chart leans on hardest and the one a reader may not be watching, so a break in sampling has to be readable after the fact.
• A dropped or reconnecting feed is announced politely (`role="status"`) when the host reports it through `connection`, and the Reconnect button is a real, labelled button.
• The streaming SVG is `role="img"` with a description of the series (override via `ariaLabel`); play/pause and reset controls are labelled buttons.
• Live spline and live stock surface the latest value as text — the legend reading and the ticker price. The live stream does not yet, and none of the live variants reduces its motion under `prefers-reduced-motion` yet.