Area chart
Line chart with a gradient fill that is revealed by a clip following each line as it draws.
A preset of Line chart.
AreaChart, storage
Installation
npx shadcn add https://www.reelcn.dev/r/area-chart.jsonFiles land in src/reelcn/ with the items it builds on.
Usage
<Center>
<AreaChart
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[{ label: "Visitors", points: [3200, 4100, 3900, 5200, 6100, 4800, 7400] }]}
/>
</Center>Props
PropTypeDescription
formatNumberFormatOptions`Intl.NumberFormat` options for value and axis labels. Defaults to the precision of the data.
delaynumberFrames to wait before entering.
durationnumberEnter duration in frames. Defaults to 0.6s. Some items reuse
duration for an unrelated local timing. See that item's own prop docs.exitnumber | booleanExit at the end of the parent `<Sequence>`.
false keeps it on screen, a number sets the exit length in frames.motionMotionPersonalityOverride the theme's motion personality.
posterbooleanRenders fully entered, with no exit: for a still frame or thumbnail. Defaults to
false.holdFramesnumberDelays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to
0.series*LineChartSeries[]
labelsstring[]X-axis labels, one per point. Crowded axes show every second label or fewer.
areaOpacitynumberOpacity at the top of the area gradient.
zerobooleanStart the y axis at zero. Defaults to
true with area; otherwise the axis fits the data.widthnumberWidth in design units. Defaults to the safe-area width.
heightnumberHeight in design units, legend included.
strokeWidthnumberLine thickness in design units.
drawFramesnumberFrames each line takes to draw. Defaults to 1.4s.
staggernumberFrames between series. Defaults to 0.25s.
showGridboolean
showEndbooleanDot and counting value label at the tip of each line.
localestringBCP 47 locale for numbers.
colorsstring[]Series colors in order. Defaults to the theme palette, accent first.
labelColorstringAxis and legend labels. Defaults to the theme muted color.
gridColorstringGridlines. Defaults to the theme border.
styleCSSProperties
classNamestring
Built from
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
Guides
Components take their colors from a theme, their timing from motion props and their layout from the canvas.
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 />;
}