A customizable area chart component to visualize your data with gradient fills and smooth curves. 📈
pnpm dlx shadcn@latest add 'https://retroui.dev/r/area-chart.json'| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | [] | Array of data objects to display |
| index | string | - | Key for the x-axis (category) data |
| categories | string[] | [] | Array of keys for the data values to display as areas |
| fill | "gradient" | "solid" | "gradient" | Fill style for the areas |
| strokeColors | string[] | ["var(--foreground)"] | Array of stroke colors for the areas |
| fillColors | string[] | ["var(--primary)"] | Array of fill colors for the areas |
| tooltipBgColor | string | "var(--background)" | Background color for tooltips |
| tooltipBorderColor | string | "var(--border)" | Border color for tooltips |
| gridColor | string | "var(--muted)" | Color for the grid lines |
| valueFormatter | (value: number) => string | (value) => value.toString() | Function to format values |
| showGrid | boolean | true | Whether to show grid lines |
| showTooltip | boolean | true | Whether to show tooltips on hover |
| className | string | - | Additional CSS classes |
Last Updated: 12 Aug, 2025