AreaChart

An area chart for displaying trends over time with filled areas. Supports single and multiple data series with optional stacking.

Features

Single and multiple data series support
Stacked or overlapping areas
Smooth curve rendering
Grid lines for reference
Axis labels and title
Legend display
Interactive points with click events
Responsive sizing

Examples

Single Series AreaChart

Website Traffic

<AreaChart
  series={[{
    label: 'Website Traffic',
    data: [10, 15, 12, 18, 22, 20, 25],
    color: '#3b82f6'
  }]}
  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
  title="Website Traffic"
  width={600}
  height={300}
/>

Stacked AreaChart

Traffic by Device (Stacked)

Desktop

Mobile

<AreaChart
  series={[
    { label: 'Desktop', data: [10, 15, 12, 18, 22, 20, 25], color: '#3b82f6' },
    { label: 'Mobile', data: [8, 12, 14, 16, 18, 22, 20], color: '#ef4444' }
  ]}
  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
  title="Traffic by Device (Stacked)"
  yAxisLabel="Visits"
  stacked={true}
  showGrid={true}
  showLegend={true}
  width={600}
  height={300}
/>

Props

Prop	Type	Default	Description
`series`	`Series[]`	Required	Array of data series
`onpointclick`	`{ seriesIndex: number; pointIndex: number; value: number }`	Fired when a data point is clicked
`labels`	`string[]`	Required	Array of x-axis labels
`title`	`string`	undefined	Chart title
`yAxisLabel`	`string`	undefined	Y-axis label
`stacked`	`boolean`	false	Stack areas on top of each other
`showGrid`	`boolean`	true	Show grid lines
`showLegend`	`boolean`	true	Show legend
`width`	`number`	500	Chart width in pixels
`height`	`number`	300	Chart height in pixels

Best Practices

Use for showing trends over time
Use stacking for cumulative data
Limit to 3-4 series for clarity
Include axis labels for context