Playground — Realtime Line Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/realtime-line-chart

Realtime Line / Waterfall Playground

Line and Waterfall are two views of the same streaming signal. A line chart is the natural default for monitoring a continuous value over time — CPU load, stock price, sensor temperature — where the shape of the curve tells the story. Switch to a waterfall when you care about individual changes: each bar shows one delta (green for gains, red for losses), making it easy to spot anomalies or audit a sequence of incremental updates like a P&L statement. Use the toggle below to compare them side-by-side on the same data stream.

Chart Type:

Signal:

Style

Line Color

#007bff

Line Width

Data

Buffer Size

Layout

Direction

Show Axes

Interaction

Enable Hover

Generated Code

JSX

import { RealtimeLineChart } from "semiotic" import { useRef } from "react" const chartRef = useRef() // Push data at any frequency chartRef.current.push({ time: Date.now(), value: reading }) <RealtimeLineChart ref={chartRef} timeAccessor="time" valueAccessor="value" />