Area

Chart.Area fills the space between each series and zero. Each row is a point on the top line of the area. The points are focus targets, but they show only when they have the focus.

Anatomy

<script lang="ts">
	import { Chart } from '@human-kit/charts';
	import { scaleTime } from '@human-kit/charts/scales/time';
</script>

<Chart.Root data={rows} x="day" y="requests" xScale={{ type: scaleTime }}>
	<Chart.Title>Requests per day</Chart.Title>
	<Chart.Plot>
		<Chart.Area />
	</Chart.Plot>
</Chart.Root>

The mark makes a <g> with one group for each series. A series group holds a filled <path>, a <path> for the top line, and one <circle> for each point.

Stacked

Give stacked to put the series one on the other. The first series is on the top, and each area is on the area of the next series. Thus the order from the top to the bottom is the order of the legend, and ArrowDown goes down on the screen. The y scale includes the top of the stack.

Without stacked, each area starts at zero, and the areas can cover each other. Give the fill an opacity, so that the user can see all of the series.

A stack changes the domain of the y scale. On the server, a guide before the mark does not see the top of the stack. Thus put the mark before the guides, or give the domain of the y scale.

Points

The default radius r is 0. The points are hidden, but they stay focus targets. The focused point gets the radius focusRadius, which is 4 pixels by default. Give r to show all of the points.

Styles

Give each series a color with the CSS color. The filled path uses it as its fill, and the top line uses it as its stroke.

.chart [data-area] {
	opacity: 0.2;
}

.chart [data-line] {
	stroke-width: 2;
}

API reference

Area

An area mark. It makes one filled <path> and one line per series. The points show only when they have the focus.

* required.