import { RealtimeLineChart } from "semiotic"
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" 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} /> ) }
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. Each object should contain fields matched by timeAccessor and valueAccessor. |
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 | object | — | — | Chart 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". |
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. |
Graduating to the Frame
When you need full control — custom canvas rendering, multiple overlapping chart types, or advanced annotation logic — graduate toStreamXYFrame directly. Every RealtimeLineChart is just a configuredStreamXYFrame under the hood.
Chart (simple)
JSX
import { RealtimeLineChart } from "semiotic" <RealtimeLineChart ref={chartRef} stroke="#007bff" strokeWidth={2} windowSize={150} enableHover />
Frame (full control)
JSX
import { StreamXYFrame } from "semiotic" <StreamXYFrame ref={frameRef} chartType="line" windowSize={150} lineStyle={{ stroke: "#007bff", strokeWidth: 2 }} hoverAnnotation={true} showAxes={true} />