import { RealtimeLineChart } from "semiotic/realtime"
RealtimeLineChart renders a continuously updating line from streaming data. It wrapsStreamXYFrame withchartType="line" and promotes stroke styling to top-level props. Create a ref and call ref.current.push(point) in asetInterval to stream data in.
Quick Start
Create a ref, push data points on an interval, and RealtimeLineChart handles the rest. The sliding window keeps the most recent points in view.
JSX
import { RealtimeLineChart } from "semiotic/realtime" import { useRef, useEffect } from "react" function StreamingLine() { const chartRef = useRef() const indexRef = useRef(0) useEffect(() => { const id = setInterval(() => { chartRef.current?.push({ time: indexRef.current++, value: 50 + Math.sin(indexRef.current * 0.05) * 20 }) }, 50) return () => clearInterval(id) }, []) return ( <RealtimeLineChart ref={chartRef} stroke="#007bff" strokeWidth={2} windowSize={150} showAxes={true} /> ) }
Event-Time Ordering and Aggregation
Set eventTime when events can arrive out of order. RealtimeLineChart holds a bounded grace window, then releases points in event-time order. This delays display by lateness. Call the chart-specific RealtimeLineChartHandle.flush() only when the source reaches a real end-of-stream or batch boundary; there is no need to push a fake future point to release the tail.
The optional aggregate transform reduces raw events into tumbling, hopping, or session windows before rendering. Changing the window structure or either accessor rebuilds the accumulator: controlled data is replayed, while a push-only stream begins a new epoch because raw history is not retained.
JSX
const chartRef = useRef() <RealtimeLineChart ref={chartRef} eventTime={{ lateness: "2s", latePolicy: "drop" }} aggregate={{ window: "tumbling", size: "10s", stat: "mean", band: "stddev", retain: 120 }} /> // At a confirmed stream or batch boundary: chartRef.current?.flush()
Examples
Custom Stroke Color and Width
Use stroke and strokeWidth to style the line.
JSX
<RealtimeLineChart ref={chartRef} stroke="#e74c3c" strokeWidth={3} windowSize={150} />
Dashed Line
Set strokeDasharray to create a dashed line pattern, useful for representing projected or estimated values.
JSX
<RealtimeLineChart ref={chartRef} stroke="#28a745" strokeWidth={2} strokeDasharray="6,3" windowSize={150} />
Fixed Value Extent
Pin the y-axis range with valueExtent so the chart does not rescale as new data arrives.
JSX
<RealtimeLineChart ref={chartRef} stroke="#6f42c1" strokeWidth={2} valueExtent={[0, 100]} windowSize={150} />
Annotations and Thresholds
Use annotations and svgAnnotationRules to draw threshold lines, callouts, or any custom SVG annotation over the streaming line. Annotations are rendered in an SVG overlay on top of the canvas so they stay crisp at any scale.
JSX
<RealtimeLineChart ref={chartRef} stroke="#f59e0b" strokeWidth={2} windowSize={200} annotations={[ { type: "threshold", value: 130, label: "High", color: "#ef4444" }, { type: "threshold", value: 70, label: "Low", color: "#6366f1", thresholdType: "lesser" } ]} svgAnnotationRules={(annotation, i, context) => { if (annotation.type === "threshold" && context?.scales) { const y = context.scales.value(annotation.value) return ( <g key={`threshold-${i}`}> <line x1={0} x2={context.width} y1={y} y2={y} stroke={annotation.color} strokeDasharray="6,3" /> <text x={context.width - 4} y={y - 6} textAnchor="end" fill={annotation.color} fontSize={11} fontWeight="bold"> {annotation.label}: {annotation.value} </text> </g> ) } return null }} />
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | — | — | Controlled data array. Omit this prop to use the ref push API; data={[]} is controlled empty data, not push mode. |
timeAccessor | string | function | — | "time" | Field name or function to access the time value from each data point. |
valueAccessor | string | function | — | "value" | Field name or function to access the numeric value from each data point. |
size | [number, number] | — | [500, 300] | Chart dimensions as [width, height]. |
margin | number | object | — | — | Uniform numeric margin or per-side margins: { top, right, bottom, left }. |
arrowOfTime | "left" | "right" | — | "right" | Direction that time flows across the chart. |
windowMode | "sliding" | "growing" | — | "sliding" | Data retention strategy. "sliding" discards old points beyond windowSize; "growing" keeps all. |
windowSize | number | — | 200 | Ring buffer capacity when using sliding window mode. |
timeExtent | [number, number] | — | — | Fixed time domain. Defaults to auto-fit. |
valueExtent | [number, number] | — | — | Fixed value domain. Defaults to auto-fit. |
extentPadding | number | — | — | Padding factor applied to auto-computed extents. |
stroke | string | — | "#007bff" | Line color. |
strokeWidth | number | — | 2 | Line width in pixels. |
strokeDasharray | string | — | — | SVG dash pattern string, e.g. "4,2". |
opacity | number | — | 1 | Uniform line opacity from 0 to 1. |
cursor | CSS cursor | — | — | Presentation-only cursor for the line, such as "pointer". It does not add click or keyboard behavior. |
aggregate | object | — | — | Reduce pushed events into tumbling, hopping, or session windows before rendering. |
eventTime | object | — | — | Reorder pushed events inside a bounded lateness window. Call flush() at an asserted stream or batch boundary. |
showAxes | boolean | — | true | Show canvas-drawn axes. |
background | string | — | — | Background fill color for the chart area. |
enableHover | boolean | object | — | — | Enable hover annotations on the chart. |
tooltipContent | function | — | — | Custom tooltip render function. Receives hover data. |
onHover | function | — | — | Callback fired on hover. Receives hover data or null. |
annotations | array | — | — | Array of annotation objects rendered on the chart. |
svgAnnotationRules | function | — | — | Custom SVG annotation render function. |
tickFormatTime | function | — | — | Custom formatter for time axis tick labels. |
tickFormatValue | function | — | — | Custom formatter for value axis tick labels. |
className | string | — | — | CSS class name for the chart container. |
When to Use the Frame
Use StreamXYFrame directly for custom canvas rendering, overlapping chart types, or advanced annotation logic.RealtimeLineChart delegates to a configured StreamXYFrame.
Chart (simple)
JSX
import { RealtimeLineChart } from "semiotic/realtime" <RealtimeLineChart ref={chartRef} stroke="#007bff" strokeWidth={2} windowSize={150} enableHover />
Frame (full control)
JSX
import { StreamXYFrame } from "semiotic/realtime" <StreamXYFrame ref={frameRef} chartType="line" windowSize={150} lineStyle={{ stroke: "#007bff", strokeWidth: 2 }} hoverAnnotation={true} showAxes={true} />