Area chart
Filled area under a line. Renders a gradient fill from opacityFrom to opacityTo.
Primitive:
ChartAreaInteractive demo
Usage
import { ChartRoot, ChartArea, ChartLine } from '@ramtt/charts'
<ChartRoot data={data} height={200}>
<ChartArea gradientColor="#16a34a" />
<ChartLine className="stroke-green-600 stroke-[1.5]" />
</ChartRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gradientColor | string | '#16a34a' | Fill gradient color |
| opacityFrom | number | 0.06 | Top opacity |
| opacityTo | number | 0.005 | Bottom opacity |
| thresholdY | number | — | Threshold for dual-color fill |
| negativeColor | string | '#ef4444' | Color below threshold |