Area Chart

A filled line chart for visualizing trend data over time.

Install

npx shadcn add @clearly/area-chart

import { AreaChart } from "@/components/ui/area-chart"

<AreaChart />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`data`	`Array<Record<string, unknown>>`	`—`	Row data for the chart.
`config`	`ChartConfig`	`—`	Recharts color/label config keyed by data field.
`dataKey`	`string`	`"value"`	Field name for the Y-axis series.
`xKey`	`string`	`"month"`	Field name for the X-axis labels.