import { StackedAreaChart } from "semiotic"
StackedAreaChart visualizes quantities stacked on top of each other over continuous intervals. Each series is stacked so that the total height represents the sum of all series, making it easy to compare both individual contributions and the overall total. Usenormalize for 100% stacked (proportional) areas. For overlapping (non-stacked) areas, useAreaChart.
Quick Start
A stacked area chart requires data,xAccessor, yAccessor, andareaBy to group data into stacks.
import { StackedAreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { quarter: 1, revenue: 12000, region: "North" }, { quarter: 2, revenue: 15000, region: "North" }, { quarter: 1, revenue: 8000, region: "South" }, // ...more data points grouped by region ], /* --- Layout --- */ areaBy: "region", /* --- Process --- */ xAccessor: "quarter", yAccessor: "revenue", /* --- Customize --- */ xLabel: "Quarter", yLabel: "Revenue ($)", colorBy: "region" } export default () => { return <StackedAreaChart {...frameProps} /> }
Examples
Pass tooltip="multi" when readers need to compare every stack at the same x position. The tooltip follows the cursor across the rendered x range and lists each stack's individual contribution, not the cumulative stack height.
import { StackedAreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: regionalData, /* --- Layout --- */ areaBy: "region", /* --- Process --- */ xAccessor: "quarter", yAccessor: "revenue", /* --- Customize --- */ xLabel: "Quarter", yLabel: "Revenue ($)", colorBy: "region", /* --- Interact --- */ tooltip: "multi" } export default () => { return <StackedAreaChart {...frameProps} /> }
Normalized (100% Stacked)
Set normalize to true to show proportional contributions. The y-axis will range from 0 to 1 (or 0% to 100%).
import { StackedAreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { quarter: 1, revenue: 12000, region: "North" }, // ...data grouped by region ], /* --- Layout --- */ areaBy: "region", normalize: true, /* --- Process --- */ xAccessor: "quarter", yAccessor: "revenue", /* --- Customize --- */ xLabel: "Quarter", yLabel: "Share", colorBy: "region" } export default () => { return <StackedAreaChart {...frameProps} /> }
Step Interpolation
Use curve="step" for a stepped appearance, useful for data that changes at discrete intervals.
import { StackedAreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: regionalData, /* --- Layout --- */ areaBy: "region", /* --- Process --- */ xAccessor: "quarter", yAccessor: "revenue", /* --- Customize --- */ xLabel: "Quarter", yLabel: "Revenue ($)", colorBy: "region", curve: "step" } export default () => { return <StackedAreaChart {...frameProps} /> }
Without Line Borders
Set showLine to false to remove the stroke between stacked areas for a smoother appearance.
import { StackedAreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: regionalData, /* --- Layout --- */ areaBy: "region", /* --- Process --- */ xAccessor: "quarter", yAccessor: "revenue", /* --- Customize --- */ xLabel: "Quarter", yLabel: "Revenue ($)", colorBy: "region", areaOpacity: 0.85, showLine: false } export default () => { return <StackedAreaChart {...frameProps} /> }
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Array of data points, grouped by category. |
xAccessor | string | function | — | "x" | Field name or function to access x values from each data point. |
yAccessor | string | function | — | "y" | Field name or function to access y values from each data point. |
areaBy | string | function | — | — | Field name or function to group data into multiple stacked areas (e.g., by series). |
lineDataAccessor | string | — | "coordinates" | Field name in area objects that contains coordinate arrays. |
colorBy | string | function | — | — | Field name or function to determine area color for each stack. |
colorScheme | string | array | — | "category10" | Color scheme name or custom colors array. |
curve | string | — | "monotoneX" | Curve interpolation: "linear", "monotoneX", "monotoneY", "step", "basis", "cardinal", "catmullRom". |
areaOpacity | number | — | 0.7 | Opacity of the filled areas. |
showLine | boolean | — | true | Show a line on top of each stacked area. |
lineWidth | number | — | 2 | Stroke width of the line when showLine is true. |
showPoints | boolean | — | false | Show data points on area lines. Useful for sparse data or single-point series. |
pointRadius | number | — | 3 | Point radius when showPoints is true. |
normalize | boolean | — | false | Normalize to 100% stacked (proportional) areas. |
enableHover | boolean | — | true | Enable hover annotations on data points. |
showGrid | boolean | — | false | Show background grid lines. |
showLegend | boolean | — | true (multi-area) | Show a legend. Defaults to true when multiple areas are present. |
tooltip | "multi" | object | function | — | — | Tooltip configuration or render function. Pass "multi" to show every stack value at the hovered x position. |
width | number | — | 600 | Chart width in pixels. |
height | number | — | 400 | Chart height in pixels. |
margin | object | — | { top: 50, bottom: 60, left: 70, right: 40 } | Margin around the chart area. |
xLabel | string | — | — | Label for the x-axis. |
yLabel | string | — | — | Label for the y-axis. |
title | string | — | — | Chart title displayed at the top. |
frameProps | object | — | — | Additional StreamXYFrame props for advanced customization. Escape hatch to the full Frame API. |
Graduating to the Frame
When you need more control — custom marks, complex annotations, dual-axis layouts — graduate to StreamXYFramedirectly. Every StackedAreaChart is just a configuredStreamXYFrame under the hood.
Chart (simple)
JSX
import { StackedAreaChart } from "semiotic" <StackedAreaChart data={regionalData} xAccessor="quarter" yAccessor="revenue" areaBy="region" colorBy="region" normalize={true} xLabel="Quarter" yLabel="Share" />
Frame (full control)
JSX
import { StreamXYFrame } from "semiotic" <StreamXYFrame lines={[ { region: "North", coordinates: northData }, { region: "South", coordinates: southData } ]} xAccessor="quarter" yAccessor="revenue" lineDataAccessor="coordinates" lineType={{ type: "stackedpercent-area", interpolator: curveMonotoneX }} lineStyle={d => ({ fill: colorScale(d.region), fillOpacity: 0.7, stroke: colorScale(d.region), strokeWidth: 2 })} axes={[ { orient: "left", label: "Share" }, { orient: "bottom", label: "Quarter" } ]} hoverAnnotation={true} size={[600, 400]} />
The frameProps prop on StackedAreaChart lets you pass any StreamXYFrame prop without fully graduating:
JSX
// Use frameProps as an escape hatch <StackedAreaChart data={regionalData} xAccessor="quarter" yAccessor="revenue" areaBy="region" colorBy="region" frameProps={{ annotations: [ { type: "x", quarter: 3, label: "Q3 Peak" } ] }} />
- AreaChart — overlapping (non-stacked) filled areas
- LineChart — lines without fill for trend comparison
- StreamXYFrame — the underlying Frame with full control over every rendering detail
- Annotations — adding callouts, highlights, and notes to any visualization
- Tooltips — custom tooltip content and positioning