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.

Loading
No data available
dowe
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:true

SERIES 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.

Loading
No data available
dowe
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.

Loading
No data available
Loading
No data available
Loading
No visits yet
dowe
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 data

There are no records to display