Loading...
Loading...
> A multi-series area chart built with Recharts. Supports gradient fills, stacked areas, and theme-aware colors.
1import { AreaChart, AreaChartCard, StackedAreaChart } from "@/components/ui/area-chart"
1<AreaChart2 data={data}3 xAxisKey="month"4 series={[5 { dataKey: "revenue", name: "Revenue" },6 { dataKey: "users", name: "Users" },7 ]}8 height={300}9 showLegend={true}10/>
Monthly revenue trend
1<AreaChartCard2 title="Revenue Analytics"3 description="Monthly revenue trend"4 code="0x01"5 icon={<TrendingUp className="h-4 w-4 text-primary" />}6 data={data}7 xAxisKey="month"8 series={[{ dataKey: "revenue", name: "Revenue" }]}9/>
1<AreaChart2 data={data}3 xAxisKey="month"4 series={[{ dataKey: "revenue", fillOpacity: 0.3 }]}5 gradient={false}6/>
1<StackedAreaChart2 data={data}3 xAxisKey="month"4 stackKeys={["desktop", "mobile", "tablet"]}5 stackLabels={["Desktop", "Mobile", "Tablet"]}6/>
1<AreaChart2 data={data}3 xAxisKey="month"4 series={[5 { dataKey: "revenue", showDots: true, dotSize: 5 },6 ]}7/>
1<AreaChart2 data={data}3 xAxisKey="month"4 series={[{ dataKey: "users", type: "step" }]}5/>
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | AreaChartDataPoint[] | - | Chart data array. |
| xAxisKey* | string | - | Data key for X-axis. |
| series* | AreaChartSeries[] | - | Area series configuration. |
| height | number | 300 | Chart height in pixels. |
| showGrid | boolean | true | Show grid lines. |
| showLegend | boolean | false | Show legend. |
| showTooltip | boolean | true | Show tooltip on hover. |
| gradient | boolean | true | Use gradient fill effect. |
| yAxisFormatter | (value: number) => string | - | Y-axis value formatter. |
| xAxisFormatter | (value: string) => string | - | X-axis value formatter. |