AreaChart
SVG-based area chart with configurable points, stroke color, area fill, and height.
Default Chart
Basic area chart with gold fill and default data points.
Growth Area
Green area chart for visualizing growth metrics over time.
Decline Indicator
Red area chart for alerting downward trends in key metrics.
Tall Chart
Increased height area chart with custom data for detailed visualization.
Server Traffic
Purple area chart showing server request volume patterns.
Revenue Stream
Amber area chart for financial dashboard revenue visualization.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
points | text | "0,80 40,30 80,60 120,10 160,50 200,20" | SVG coordinate pairs for the area shape |
color | text | "#c9952c" | Stroke color of the area outline |
fill | text | "#c9952c" | Fill color of the area (with opacity) |
height | text | "200" | Chart height in pixels |