Core
Area Chart
An area chart displays quantitative data over a continuous axis with filled regions that highlight trends and changes over time.
Example
Usage
Features
- Trend-friendly and ideal for time-based data.
- Built on Recharts with LibravelUI surface styling.
- Uses the default chart palette from theme tokens.
- Supports multiple series, custom axes, and custom tooltip props.
- Keeps the API compact while still staying flexible.
Installation
Copy the shared chart utilities and the chart component you need into your project.
npx libravelui@latest add area-chartAnatomy
import { AreaChart } from "@/components/ui/core/charts/area-chart";<AreaChart
data={data}
dataKey="month"
config={{
revenue: { label: "Revenue" },
profit: { label: "Profit" },
}}
/>Props
Loading types…
Edit on GitHub
Last updated on