import { StreamXYFrame } from "semiotic"
StreamXYFrame is the foundational frame for all continuous x/y data visualization in Semiotic. It renders lines, areas, points, heatmaps, bars, and more on a canvas for high performance. Use StreamXYFrame directly when you need full control over mark rendering, multi-layer compositions, or features beyond what the simpler Chart components offer.
Quick Start
The simplest StreamXYFrame needs chartType,data, xAccessor, andyAccessor.
import { StreamXYFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { group: "Revenue", month: 1, value: 12000 }, { group: "Revenue", month: 2, value: 18000 }, // ...more data ], chartType: "line", groupAccessor: "group", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 40, left: 60, right: 20 }, /* --- Process --- */ xAccessor: "month", yAccessor: "value", /* --- Customize --- */ lineStyle: { stroke: "#6366f1", strokeWidth: 2 }, showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamXYFrame {...frameProps} /> }
Examples
Multi-Line with Color
Pass multiple line objects and use groupAccessor to separate them. Use a lineStyle function to color each line differently.
import { StreamXYFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { group: "Widget", month: 1, value: 12000 }, { group: "Widget", month: 2, value: 18000 }, { group: "Gadget", month: 1, value: 8000 }, // ...flat data with group field ], chartType: "line", groupAccessor: "group", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 40, left: 60, right: 20 }, /* --- Process --- */ xAccessor: "month", yAccessor: "value", /* --- Customize --- */ lineStyle: (d, group) => ({ stroke: group === "Widget" ? "#6366f1" : group === "Gadget" ? "#f59e0b" : "#10b981", strokeWidth: 2 }), showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamXYFrame {...frameProps} /> }
Scatterplot
Use chartType="scatter" with a flat data array. Customize appearance with pointStyle.
import { StreamXYFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { x: 1, y: 3 }, { x: 2, y: 7 }, { x: 3, y: 2 }, { x: 4, y: 9 }, // ...more points ], chartType: "scatter", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 40, left: 60, right: 20 }, /* --- Process --- */ xAccessor: "x", yAccessor: "y", /* --- Customize --- */ pointStyle: () => ({ fill: "#6366f1", opacity: 0.6, r: 6 }), showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamXYFrame {...frameProps} /> }
Stacked Area Chart
Set chartType="stackedarea" to stack multiple series. Use lineStyle with a fill to create colored areas.
import { StreamXYFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { id: "Product A", coordinates: [...] }, { id: "Product B", coordinates: [...] }, { id: "Product C", coordinates: [...] } ], chartType: "stackedarea", groupAccessor: "group", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 40, left: 60, right: 20 }, /* --- Process --- */ xAccessor: "month", yAccessor: "value", /* --- Customize --- */ lineStyle: (d, group) => ({ fill: colors[group], fillOpacity: 0.6, stroke: colors[group], strokeWidth: 1 }), showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamXYFrame {...frameProps} /> }
Percentile Band
Use y0Accessor with chartType="area" to fill between two y-values per data point. The area renders as a ribbon between the upper (yAccessor) and lower (y0Accessor) bounds — ideal for percentile bands, confidence intervals, or uncertainty ribbons.
JSX
<StreamXYFrame chartType="area" data={percentileData} xAccessor="month" yAccessor="p95" y0Accessor="p5" lineStyle={{ fill: "#6366f1", fillOpacity: 0.15, stroke: "none" }} showAxes size={[600, 300]} />
Props
| Prop | Type | Required | Default | Description |
|---|
chartType | string | Yes | — | Chart type: "line", "area", "stackedarea", "scatter", "bubble", "heatmap", "bar", "swarm", "waterfall", "candlestick". |
runtimeMode | "bounded" | "streaming" | — | "bounded" | Whether data is static (bounded) or pushed via ref (streaming). |
data | array | — | — | Data array. For line/area, each object has a coordinates array. For scatter, flat array of points. |
size | [number, number] | — | [500, 300] | Chart dimensions as [width, height]. |
xAccessor | string | function | — | "x" | Field name or function to access x values. |
yAccessor | string | function | — | "y" | Field name or function to access y values. |
groupAccessor | string | function | — | — | Groups data into separate lines/areas by this field. |
lineDataAccessor | string | — | "coordinates" | How to access the coordinates array from each line object. |
lineStyle | object | function | — | — | Style for line marks. Object or (datum, group) => Style. |
pointStyle | function | — | — | Style for point marks. (datum) => Style & { r? }. |
showAxes | boolean | — | true | Show axes on the chart. |
xLabel | string | — | — | Label for the x axis. |
yLabel | string | — | — | Label for the y axis. |
margin | object | — | { top: 20, right: 20, bottom: 30, left: 40 } | Chart margins: { top, right, bottom, left }. |
enableHover | boolean | — | — | Enable hover tooltips. |
showGrid | boolean | — | false | Show grid lines. |
colorScheme | string | string[] | — | — | Color scheme for multi-series data. |
background | string | — | — | Background fill color. |
xExtent | array | — | — | Fixed x-axis domain as [min, max]. |
yExtent | array | — | — | Fixed y-axis domain as [min, max]. |
y0Accessor | string | function | — | — | Per-point area baseline accessor. When set with chartType="area", fills between yAccessor (top) and y0Accessor (bottom) instead of to the axis. Use for percentile bands, confidence ribbons, or any band chart. |
gradientFill | boolean | object | — | — | Gradient fill for area charts. true for default (80%→5%) or { topOpacity, bottomOpacity }. Fill fades from opaque at the line to transparent at the baseline. |
annotations | array | — | — | Array of annotation objects. |
svgAnnotationRules | function | — | — | Custom SVG annotation render function. |
- LineChart -- simplified Chart component that wraps StreamXYFrame for line visualizations
- AreaChart -- simplified Chart component for filled area charts
- Scatterplot -- simplified Chart component for point-based visualizations
- StreamOrdinalFrame -- for categorical data (bar charts, violin plots, etc.)
- StreamNetworkFrame -- for topological data (force layouts, hierarchies, etc.)