POINTS OR SERIES
Shape plus context
Start with x/y points, then move to named series when one area is not enough.
CHARTS
AreaChart
Filled trends that keep change, volume, and accumulation visible across every target.
POINTS OR SERIES
Shape plus context
Start with x/y points, then move to named series when one area is not enough.
POINT DATA
Fill the space below a trend
AreaChart accepts numeric x and y values. smooth, fillOpacity, and showPoints make the shape legible without adding custom drawing code.
type ChartPoint
x:number
y:number
signal visits type:ChartPoint[] value:[{ x:1 y:24 }, { x:2 y:31 }, { x:3 y:28 }]
AreaChart data:visits variant:"soft" scheme:"surface" size:"lg" palette:"ocean" curve:"smooth" strokeWidth:3 fillOpacity:0.32 showPoints:trueSERIES AND STACKING
Compare channels in one surface
A series item names its line, owns a nested point array, and may provide a semantic color token. stacked:true changes the comparison into a cumulative story.
type ChartSeries
name:string
data:ChartPoint[]
signal channels type:ChartSeries[] value:[{ name:"Web" data:[{ x:1 y:28 }, { x:2 y:35 }] }]
AreaChart series:channels variant:"outlined" scheme:"primary" palette:"forest" curve:"linear" fillOpacity:0.22 strokeWidth:2 stacked:true showPoints:true legendPosition:"top"STATES AND AXES
Reduce noise deliberately
Hide only the visual guides that are redundant for the context. Keep a legend or nearby copy when the fill colors carry meaning.
AreaChart data:visits variant:"solid" scheme:"surface" hideGrid:true hideXAxis:true hideYAxis:true hideLine:true fillOpacity:0.5
AreaChart data:emptyPoints variant:"outlined" scheme:"warning" emptyLabel:"No visits yet"API
Props
AreaChart also accepts applicable common identity, spacing, sizing, visibility, radius, border, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||