Area Chart

v0.2.2

Fully presentational area chart widget using Recharts. Supports multiple areas, stacked areas, custom curve types, fill opacity control, and responsive design.

View as Markdown

Install

npx shadcn@latest add @signalos/area-chart

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/chart-core) are pulled automatically.

Preview

Example & code

area-chart.example.tsx

import { AreaChart } from "@/components/widgets/area-chart/AreaChart"

const data = [
  { month: "Jan", visitors: 4000, pageviews: 6400 },
  { month: "Feb", visitors: 3000, pageviews: 5398 },
  { month: "Mar", visitors: 2000, pageviews: 4800 },
  { month: "Apr", visitors: 2780, pageviews: 5908 },
  { month: "May", visitors: 1890, pageviews: 4800 },
  { month: "Jun", visitors: 2390, pageviews: 5800 },
]

export default function AreaChartExample() {
  return (
    <AreaChart
      data={data}
      areas={[
        { dataKey: "visitors", name: "Visitors", fill: "var(--chart-1)" },
        { dataKey: "pageviews", name: "Pageviews", fill: "var(--chart-2)" },
      ]}
      xAxis={{ dataKey: "month" }}
      height={350}
    />
  )
}

Props

AreaChartDataPoint

Prop	Type	Default	Description

AreaChartArea

Prop	Type	Default	Description
dataKey*	`string`	-	The data key to plot from your data points
name	`string \| undefined`	-	Display name for the legend and tooltip
fill	`string \| undefined`	-	Area fill color (use CSS custom property or hex)
stroke	`string \| undefined`	-	Area stroke color
strokeWidth	`number \| undefined`	-	Stroke thickness in pixels
fillOpacity	`number \| undefined`	-	Fill opacity (0-1)
stackId	`string \| undefined`	-	Stack ID for stacked areas (areas with same stackId will stack)
animationDuration	`number \| undefined`	-	Whether to animate the area on mount
type	`"basis" \| "basisClosed" \| "basisOpen" \| "linear" \| "linearClosed" \| "natural" \| "monotoneX" \| "monotoneY" \| "monotone" \| "step" \| "stepBefore" \| "stepAfter" \| undefined`	-	Area type

AreaChartAxis

Prop	Type	Default	Description
dataKey	`string \| undefined`	-	The data key for this axis
axisLine	`boolean \| undefined`	-	Whether to show the axis line
tickLine	`boolean \| undefined`	-	Whether to show tick marks
tickFormatter	`((value: unknown) => string) \| undefined`	-	Custom tick formatter function
label	`string \| { value: string; angle?: number \| undefined; position?: string \| undefined; } \| undefined`	-	Label for the axis
hide	`boolean \| undefined`	-	Whether to hide the axis entirely
tick	`boolean \| object \| undefined`	-	Axis tick styles

AreaChartGrid

Prop	Type	Default	Description
horizontal	`boolean \| undefined`	-	Show horizontal grid lines
vertical	`boolean \| undefined`	-	Show vertical grid lines
stroke	`string \| undefined`	-	Grid line stroke color
strokeDasharray	`string \| undefined`	-	Grid line stroke dash pattern

AreaChartLegend

Prop	Type	Default	Description
verticalAlign	`"bottom" \| "top" \| "middle" \| undefined`	-	Legend position
align	`"left" \| "center" \| "right" \| undefined`	-
layout	`"horizontal" \| "vertical" \| undefined`	-	Legend layout
iconType	`"line" \| "plainline" \| "square" \| "rect" \| "circle" \| "cross" \| "diamond" \| "star" \| "triangle" \| "wye" \| undefined`	-	Custom icon type
formatter	`((value: string) => ReactNode) \| undefined`	-	Custom legend formatter

AreaChartTooltip

Prop	Type	Default	Description
labelFormatter	`((label: unknown) => ReactNode) \| undefined`	-	Custom tooltip formatter for label
formatter	`((value: ValueType, name: NameType, item: unknown) => ReactNode) \| undefined`	-	Custom tooltip formatter for values
cursor	`boolean \| object \| undefined`	-	Cursor style

AreaChartProps

Prop	Type	Default	Description
data*	`AreaChartDataPoint[]`	-	Array of data points to plot
areas*	`AreaChartArea[]`	-	Array of area configurations
width	`number \| undefined`	-	Chart width in pixels
height	`number \| undefined`	-	Chart height in pixels
xAxis	`AreaChartAxis \| undefined`	-	X-axis configuration
yAxis	`AreaChartAxis \| undefined`	-	Y-axis configuration
grid	`boolean \| AreaChartGrid \| undefined`	-	Grid configuration
legend	`boolean \| AreaChartLegend \| undefined`	-	Legend configuration (false to hide)
tooltip	`boolean \| AreaChartTooltip \| undefined`	-	Tooltip configuration (false to hide)
margin	`{ top?: number \| undefined; right?: number \| undefined; bottom?: number \| undefined; left?: number \| undefined; } \| undefined`	-	Chart margin (top, right, bottom, left)
isLoading	`boolean \| undefined`	-	Loading state
emptyState	`ReactNode`	-	Empty state content
onDataPointClick	`((data: unknown, index: number) => void) \| undefined`	-	Click handler for area data points
responsive	`boolean \| undefined`	-	Responsive container (auto-sizes to parent)
className	`string \| undefined`	-	Container className
style	`CSSProperties \| undefined`	-	Custom container styles

npm dependencies

recharts@^2.15.0

Changelog

Changelog - AreaChart

0.2.2

Fix onDataPointClick's index argument always being 0 regardless of which point was clicked. Now derived from Recharts' activeTooltipIndex via chart-core's resolveChartClickIndex.

0.2.1

Update data-testid call sites for the renamed prop.

0.2.0

Factor shared colors, tooltip/legend config, skeleton, and empty state into the chart-core widget; public API unchanged.

0.1.1

Replaced any types with proper Recharts types (ValueType, NameType) in AreaChartTooltip.formatter and AreaChartTooltip.labelFormatter.
Tightened tickFormatter, onDataPointClick signatures from any to unknown.

0.1.0

Initial release.

Area chart component with Recharts integration
Support for multiple areas with custom colors and styling
Stacked areas support via stackId
Multiple curve types (monotone, natural, step, linear, etc.)
Fill opacity control for transparency effects
Configurable axes, grid, legend, and tooltip
Responsive container support
Loading skeleton and empty state
Fully presentational (props-in/events-out pattern)