Area Chart

An area chart component built using Recharts v3. Supports stacked areas, gradients, and custom tooltips.

Installation

$ npx shadcn@latest add @orecus/area-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Component

Area Chart - Stacked

Showing total visitors for the last 7 days

With Reference Lines

Target and average thresholds

Props

Prop	Type	Default	Description
`data`*	`any[]`	—	The data for the chart
`categories`*	`string[]`	—	Keys in data to map to lines/areas
`index`*	`string`	—	Key in data to use for x-axis
`colors`	`ThemeColor[]`	—	Colors for each category
`curveType`	`'linear' \| 'monotone' \| 'step' \| '...'`	`'monotone'`	Curve interpolation type
`connectNulls`	`boolean`	`false`	Connect area across null/undefined values
`showDataLabels`	`boolean`	`false`	Show value labels directly on data points
`showLegend`	`boolean`	`true`	Show chart legend
`showGridLines`	`boolean`	`true`	Show grid lines
`actions`	`ReactNode`	—	Actions to display in the chart header
`cardProps`	`CardProps`	—	Props to pass to the underlying Card component
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`tooltipShowTotal`	`boolean`	`false`	Show total in tooltip for multi-series
`tooltipTotalLabel`	`string`	`'Total'`	Label for the total row in tooltip
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'square'`	Shape of legend indicators
`interactiveLegend`	`boolean`	`false`	Allow clicking legend items to toggle series visibility
`legendWrap`	`boolean`	`true`	Allow legend items to wrap to multiple lines
`xAxisFormatter`	`(value: string) => string`	—	Formatter for x-axis tick labels and tooltip header
`xAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the x-axis — overrides xAxisFormatter when set
`yAxisFormatter`	`(value: number) => string`	—	Formatter for y-axis tick labels — falls back to valueFormatter
`yAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the y-axis — overrides yAxisFormatter when set
`referenceLines`	`ChartReferenceLine[]`	—	Reference lines (targets, thresholds, averages) rendered on the chart