Data
Data
Area Chart
Line chart with a gradient fill that is revealed by a clip following each line as it draws.
Install
Usage
<Center>
<AreaChart
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[{ label: "Visitors", points: [3200, 4100, 3900, 5200, 6100, 4800, 7400] }]}
/>
</Center>Props
| Name | Type | Default | Description |
|---|---|---|---|
format? | NumberFormatOptions | — | `Intl.NumberFormat` options for value and axis labels. Defaults to the precision of the data. |
delay? | number | — | Frames to wait before entering. |
duration? | number | — | Enter duration in frames. Defaults to 0.6s. |
exit? | number | boolean | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
motion? | MotionPreset | — | Override the theme's motion personality. |
series | LineChartSeries[] | — | |
labels? | string[] | — | X-axis labels, one per point. Crowded axes show every second label or fewer. |
areaOpacity? | number | — | Opacity at the top of the area gradient. |
zero? | boolean | — | Start the y axis at zero. Defaults to `true` with `area`; otherwise the axis fits the data. |
width? | number | — | Width in design units. Defaults to the safe-area width. |
height? | number | — | Height in design units, legend included. |
strokeWidth? | number | — | Line thickness in design units. |
drawFrames? | number | — | Frames each line takes to draw. Defaults to 1.4s. |
stagger? | number | — | Frames between series. Defaults to 0.25s. |
showGrid? | boolean | — | |
showEnd? | boolean | — | Dot and counting value label at the tip of each line. |
locale? | string | — | BCP 47 locale for numbers. |
colors? | string[] | — | Series colors in order. Defaults to the theme palette, accent first. |
labelColor? | string | — | Axis and legend labels. Defaults to the theme muted color. |
gridColor? | string | — | Gridlines. Defaults to the theme border. |
style? | CSSProperties | — | |
className? | string | — |
Use
- Volume over time: traffic, storage used, cumulative revenue
- One or two series where the filled shape carries the story
Avoid
- Three or more overlapping series — use
line-chart
Dependencies
Source
registry/items/area-chart.tsx
/**
* @title Area Chart
* @category data
* @description Line chart with a gradient fill that is revealed by a clip following each line as it draws.
* @duration 60
* @preset line-chart
* @use Volume over time: traffic, storage used, cumulative revenue
* @use One or two series where the filled shape carries the story
* @avoid Three or more overlapping series — use `line-chart`
* @tags chart, area, trend, time series, data
* @example
* <Center>
* <AreaChart
* labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
* series={[{ label: "Visitors", points: [3200, 4100, 3900, 5200, 6100, 4800, 7400] }]}
* />
* </Center>
*/
import { LineChart, type LineChartProps } from "./line-chart";
export type AreaChartProps = Omit<LineChartProps, "area">;
export function AreaChart(props: AreaChartProps) {
return <LineChart {...props} area />;
}