Skip to content
Twentyfirst UIHalo

Area Chart

Charts · AreaChart

Smooth stacked areas for volume over time, with a crosshair tooltip.

Props: labels, series ({name, tint, values}), stacked (default true), height, width, format(v), legend, label.

  • Areas are the light tints, edges the -ink lines, so the stack reads in both themes.
  • Use stacked areas when the total matters; switch to LineChart when you compare series against each other.
  • Labels thin out automatically past 12 points.

Visitors by channel

Stacked, per week

0.0k10.0k20.0kW14W15W16W17W18W19W20W21
OrganicNewsletterPartners

Props

AreaChart

PropTypeNotes
labelsstring[]Required
seriesSeries[]Required
stacked?boolean
height?number
width?number
format?(v: number) => string
legend?boolean
label?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.