Area Chart

Show quantitative data over a continuous interval with filled regions. Great for cumulative values and volume comparisons.

Usage

example.tsx

import { AreaChart } from "@chartts/react"

<AreaChart
  data={trafficData}
  x="date"
  y={["pageViews", "uniqueVisitors"]}
  stacked
  gradient
/>

Props

Prop	Type	Description
data	T[]	Array of data objects
x	keyof T	Key for x-axis values
y	keyof T \| (keyof T)[]	Key(s) for area values
stacked	boolean	Stack areas. Default: false
curve	'linear' \| 'monotone' \| 'step' \| 'natural'	Curve type. Default: 'monotone'
gradient	boolean	Apply vertical gradient fill. Default: true
opacity	number	Fill opacity. 0-1. Default: 0.3