import { AreaChart } from "semiotic"
AreaChart visualizes quantities over continuous intervals with filled areas beneath a line. Each series fills from its line down to the baseline, with overlapping areas using transparency so all shapes remain visible. For stacked areas, useStackedAreaChart.
Quick Start
The simplest area chart requires just data, xAccessor, andyAccessor.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { month: 1, sales: 4200 }, { month: 2, sales: 5800 }, { month: 3, sales: 4900 }, // ...more data points ], /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)" } export default () => { return <AreaChart {...frameProps} /> }
Examples
Multiple Areas
Use areaBy to group data points into separate areas, and colorByto color them by category.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { month: 1, sales: 4200, channel: "Online" }, { month: 2, sales: 5800, channel: "Online" }, // ...data with channel field for grouping ], /* --- Layout --- */ areaBy: "channel", /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)", colorBy: "channel" } export default () => { return <AreaChart {...frameProps} /> }
Pass tooltip="multi" on multi-area charts when readers need the values for every area at the same x position. The tooltip follows the cursor across the rendered x range and interpolates values between sampled points.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: multiAreaData, /* --- Layout --- */ areaBy: "channel", /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)", colorBy: "channel", curve: "monotoneX", /* --- Interact --- */ tooltip: "multi" } export default () => { return <AreaChart {...frameProps} /> }
Custom Curve and Opacity
Adjust the curve interpolation and areaOpacity for different visual effects.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: salesData, /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)", areaOpacity: 0.4, curve: "basis" } export default () => { return <AreaChart {...frameProps} /> }
Gradient Fill
Set gradientFill to fade the fill from opaque at the line to transparent at the baseline — the modern area chart look. Use true for defaults (80% → 5%) or pass custom opacities.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: salesData, /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)", gradientFill: true, curve: "monotoneX" } export default () => { return <AreaChart {...frameProps} /> }
Area Without Top Line
Set showLine to false for a pure filled area without the stroke on top.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: salesData, /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ xLabel: "Month", yLabel: "Sales ($)", areaOpacity: 0.5, curve: "monotoneX", showLine: false } export default () => { return <AreaChart {...frameProps} /> }
Percentile Band (p5–p95)
Use y0Accessor to fill between two values per data point instead of filling down to the axis. This is ideal for percentile bands, confidence intervals, or any ribbon visualization. Layer multiple AreaCharts for nested bands (e.g., p5–p95 and p25–p75).
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { month: 1, p95: 66, median: 50, p5: 34 }, { month: 2, p95: 72, median: 55, p5: 38 }, // ...data with percentile fields ], /* --- Process --- */ xAccessor: "month", yAccessor: "p95", y0Accessor: "p5", /* --- Customize --- */ showGrid: true, xLabel: "Month", yLabel: "Value", colorScheme: ["#6366f1"], areaOpacity: 0.15, showLine: false } export default () => { return <AreaChart {...frameProps} /> }
For a layered percentile fan, render two AreaCharts — an outer p5–p95 band and an inner p25–p75 band — with a median LineChart on top:
JSX
import { AreaChart, LineChart } from "semiotic" // Outer band: 5th–95th percentile <AreaChart data={data} xAccessor="month" yAccessor="p95" y0Accessor="p5" areaOpacity={0.12} showLine={false} /> // Inner band: 25th–75th percentile <AreaChart data={data} xAccessor="month" yAccessor="p75" y0Accessor="p25" areaOpacity={0.25} showLine={false} /> // Median line <LineChart data={data} xAccessor="month" yAccessor="median" />
Multi-Color Gradient Fill
Use gradientFill with colorStops for semantic color bands (e.g. severity zones). Each stop specifies an offset (0–1) and a color string — includingtransparent. Stops can be placed at any position to create non-uniform bands.
import { AreaChart } from "semiotic" const frameProps = { /* --- Data --- */ data: simpleData, /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ gradientFill: { colorStops: [ { offset: 0, color: "rgba(244,67,54,0.8)" }, { offset: 0.25, color: "rgba(255,193,7,0.8)" }, { offset: 0.5, color: "transparent" }, ]}, color: "rgba(244,67,54,1)" } export default () => { return <AreaChart {...frameProps} /> }
Per-Series Fill Area
Use LineChart with fillArea set to an array of series names to fill only specific series while keeping others as lines. Series names match thelineBy/colorBy group key.
import { LineChart } from "semiotic" const frameProps = { /* --- Data --- */ data: multiAreaData, /* --- Layout --- */ lineBy: "channel", /* --- Process --- */ xAccessor: "month", yAccessor: "sales", /* --- Customize --- */ colorBy: "channel", areaOpacity: 0.3, fillArea: ["Online", "Retail"] } export default () => { return <LineChart {...frameProps} /> }
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Array of data points, optionally 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 areas (e.g., by series). |
y0Accessor | string | function | — | — | Per-point lower bound accessor. When set, fills between yAccessor (top) and y0Accessor (bottom) instead of to the axis. Use for percentile bands, confidence intervals, or ribbons. |
gradientFill | boolean | object | — | false | Gradient fill from line to baseline. true for defaults (80%→5%) or { topOpacity, bottomOpacity } for custom. |
lineDataAccessor | string | — | "coordinates" | Field name in area objects that contains coordinate arrays. |
colorBy | string | function | — | — | Field name or function to determine area color for multiple areas. |
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 area. |
showLine | boolean | — | true | Show a line on top of the area. |
lineWidth | number | — | 2 | Stroke width of the line when showLine is true. |
showPoints | boolean | — | false | Show data points on the area line. Useful for sparse data or single-point series. |
pointRadius | number | — | 3 | Point radius when showPoints is true. |
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 area 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. |
xExtent | [min?, max?] | — | — | Fixed x domain. Either bound may be undefined to leave that side data-derived. |
yExtent | [min?, max?] | — | — | Fixed y domain. Either bound may be undefined to leave that side data-derived. The fill baseline is the y-domain min, so yExtent={[0, 100]} anchors both axis and area baseline at 0. |
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 StreamXYFrame directly. Every AreaChartis just a configured StreamXYFrame under the hood.
Chart (simple)
JSX
import { AreaChart } from "semiotic" <AreaChart data={salesData} xAccessor="month" yAccessor="sales" areaBy="channel" colorBy="channel" curve="monotoneX" xLabel="Month" yLabel="Sales" />
Frame (full control)
JSX
import { StreamXYFrame } from "semiotic" <StreamXYFrame lines={[ { channel: "Online", coordinates: onlineData }, { channel: "Retail", coordinates: retailData } ]} xAccessor="month" yAccessor="sales" lineDataAccessor="coordinates" lineType={{ type: "area", interpolator: curveMonotoneX }} lineStyle={d => ({ fill: colorScale(d.channel), fillOpacity: 0.7, stroke: colorScale(d.channel), strokeWidth: 2 })} axes={[ { orient: "left", label: "Sales" }, { orient: "bottom", label: "Month" } ]} hoverAnnotation={true} size={[600, 400]} />
The frameProps prop on AreaChart lets you pass any StreamXYFrame prop without fully graduating:
JSX
// Use frameProps as an escape hatch <AreaChart data={salesData} xAccessor="month" yAccessor="sales" frameProps={{ annotations: [ { type: "x", month: 6, label: "Mid-year" } ] }} />
- StackedAreaChart — areas stacked on top of each other to show totals
- LineChart — line without the filled area (or use
showLine on AreaChart) - 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