AreaChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A line chart with the area below it filled with a pattern. Supports one series or several, overlapping or stacked, with optional axes, grid, dots, labels and a legend.
The chart fills the box it is given and keeps filling it in a widget's preview at any size: the areas stretch, while text, ticks, dots and patterns keep their size.
Import
import { AreaChart } from "~lib/charts/area-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | CartesianPoint[] | Record<string, CartesianPoint[]> | Yes | N/A | The points to plot (at least 2), or several named series. See Point Formats below |
pattern | "solid" | "diagonal" | "dots" | "crosshatch" | No | "diagonal" | Area fill pattern of a single series. Several series take diagonal, dots, crosshatch and solid in turn |
axis | { x?: XAxisConfig, y?: YAxisConfig } | No | N/A | Axis display configuration, as for LineChart, timeZone included |
width | number | string | No | 300 | Chart width, in pixels or any CSS length |
height | number | string | No | 300 | Chart height, in pixels or any CSS length |
smooth | boolean | No | false | Draw smooth curves through the points |
dots | boolean | No | false | Mark every point with a dot |
stacked | boolean | No | false | Stack each series' area on the one below it |
direction | "horizontal" | "vertical" | No | "horizontal" | "vertical" turns the chart on its side, filling back to the left edge |
legend | boolean | { position: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" } | No | N/A | Name each series, below the chart unless placed. Only shown for two or more series |
dataLabel | (point, index, seriesKey) => ReactNode | No | N/A | A label to show by each point; return null to skip one |
dataIcon | (point, index, seriesKey) => IconName | null | No | N/A | An Icon to set above a point's label, or on its own, as on LineChart; return null to skip one |
Point Formats
The data prop accepts any of the following CartesianPoint formats:
| Format | Description | Example |
|---|---|---|
number[] | Y values only. X is auto-indexed starting at 0 | [10, 25, 15, 30] |
[number, number][] | Explicit [x, y] tuples | [[0, 10], [5, 50], [10, 30]] |
{ x: number; y: number }[] | Object notation | [{ x: 0, y: 10 }, { x: 5, y: 50 }] |
[Date, number][] | Date on X axis (enables date tick formatting) | [[new Date("2024-01-01"), 120], ...] |
[Date, number, T][] | Date with arbitrary metadata (accessible via dataLabel) | [[new Date("2024-01-01"), 120, { emoji: "☀️" }]] |