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

Pass areaY the rows and the x and y fields to fill the space under one series, smoothed with a natural curve.

Linear

Set curve to curveLinear to join the points with straight lines.

Step

Set curve to curveStep for a value that holds until the next point, like a price or a plan.

Stacked

Set z and color to a series field and layout to stack() to pile the series on top of each other.

Stacked to 100%

Pass stack({ offset: "normalize" }) to stack the series as shares of each month's total.

Gradient

Declare gradients and point fill at them with url(#id) to fade each series toward the baseline.

Axes

Give the y scale a domain and tick values to show a value axis with chosen gridlines.

Legend

Add a row of Badge dots under the chart, colored from chartColors.series, to name each series.

Legend with icons

Name each series with an icon in its color instead of a dot.

Time range

Rebuild the definition when a Select changes, to show the last 7, 30 or 90 days of daily data.

Animated range

Render through RendererChart with a motion() renderer so the area springs between ranges, with a dot and crosshair on the focused day.