Area

Area charts fill the space under a line, to show how a total changes over time or how series stack up into it.

LLMs

Basic

Fill each Area with a linearGradient that fades from its series color to transparent, so two overlapping series stay readable.

Stacked

Give every Area the same stackId to pile the series on top of each other, so the top edge reads as the total.

Range

Pass a [low, high] pair as each row's value and the Area fills the band between them, like a daily temperature range.

Connect nulls

Set connectNulls to draw the area straight across missing values instead of breaking it, here toggled with a switch.

Custom curve

Pass a d3 curve such as curveCardinal.tension(0.8) to type and compare it with the built-in monotone curve on the same data.

Percent stacked

Set stackOffset="expand" to scale each stack to 100%, and use the tooltip's formatter to show every source's share.

Tiny

Drop the axes, grid and tooltip to turn an AreaChart into a sparkline that sits beside a headline number.

Fill by value

Split the fill gradient at zero with useYAxisScale and useChartHeight, so gains and losses get their own color.

Custom events

Handle onClick and onDoubleClick on the chart to pin a reference line at the clicked day and clear it again.

Prevent right click

Call preventDefault in onContextMenu to stop the browser's context menu from opening when you right-click the chart.

Responsive

Size the chart with the container's className, here a golden-ratio aspect with a maximum height, and mark values with ReferenceLine.

Custom animation

Pass animationInterpolateFn and a shape built on AreaRevealShape to grow the area up from the bottom instead of revealing it left to right.

Range animation

Animate a range Area and a baseValue area with a custom animationInterpolateFn, and swap the data to see the update animation.

Synchronized

Give several charts the same syncId so hovering one moves the tooltip and cursor in all of them at once.