Area Chart
FREEGradient, solid or unfilled areas; stackable.
Installation
Terminal
npx @bloxa/cli add area-chart
# or: npx shadcn@latest add @bloxa/area-chartPackages installed automatically: motion
Examples
Stacked area
Single series, gradient
API reference
Every component also accepts the props of the element it renders.
AreaChart
| Prop | Type | Default | Description |
|---|---|---|---|
| data | object[] | — | Rows. |
| index | string | — | Key for x-axis labels. |
| categories | string[] | — | Numeric series keys to draw. |
| labels | Record<string, string> | — | Display names for series. |
| colors | string[] | — | Series colors; the first is the theme accent. |
| valueFormatter | (value) => string | — | Value format; defaults to localized numbers. |
| height | number | 260 | Height in px; width follows the container. |
| showLegend / showGrid / showXAxis / showYAxis / showTooltip | boolean | true | Toggle parts. |
| stacked | boolean | false | Stack. |
| fill | "gradient" | "solid" | "none" | "gradient" | Fill. |
| curve | "smooth" | "linear" | "smooth" | Curve. |