#Area Chart

Plot one series of points as a line with the area below it filled, and a touch tooltip, pan and zoom, and dark mode built in.

#Installation

npx @blotch/dolan add area-chart

import { UiAreaChart } from '../components/ui/area-chart';

This also adds Chart, which draws the preset, and installs the npm packages @tanstack/charts and d3-shape.

#Usage

import { Component } from '@angular/core';
import { UiAreaChart } from '../components/ui/area-chart';

@Component({
  selector: 'app-visitors',
  imports: [UiAreaChart],
  template: `<ui-area-chart [data]="visitors" label="Daily visitors" />`,
})
export class Visitors {
  protected readonly visitors = [
    { x: 1, y: 12 },
    { x: 2, y: 19 },
    { x: 3, y: 15 },
    { x: 4, y: 25 },
  ];
}

• data is an array of { x, y } points, both numbers. The axes fit rounded ranges to the data, and the fill reaches down to y = 0.
• Touch the chart to see a point's values in a tooltip. Tap to pin it.
• Set label so a screen reader can say what the chart shows.

#Customize

#Colors

color sets the line, the dots and the fill. fillOpacity sets how solid the fill is, from 0 to 1 (default 0.2). A theme color such as var(--chart-2) switches with dark mode. A fixed color stays the same.

<ui-area-chart [data]="downloads" color="var(--chart-2)" [fillOpacity]="0.3" />

#Shape

smooth curves the line and the fill through the points. The curve is monotone (d3's curveMonotoneX), so the fill never bulges past a peak.

baseline is the y value the fill reaches to (default 0), and the y axis always includes it. Where the data dips below the baseline, the fill reaches up to it instead.

<ui-area-chart [data]="delta" [smooth]="true" [baseline]="0" />

strokeWidth and dotRadius are in px. Set showDots to false to hide the dots.

#Axes and range

xAxisLabel and yAxisLabel add axis titles. Horizontal gridlines are on by default: showGrid turns them off, and showXGrid adds vertical ones.

<ui-area-chart
  [data]="visitors"
  xAxisLabel="Day"
  yAxisLabel="Visitors"
  [yMax]="40"
/>

• xMin, xMax, yMin and yMax fix a bound instead of fitting the data.
• xTickFormat and yTickFormat turn tick values into labels.
• tickCount sets roughly how many ticks each axis gets. The axis picks round values near it.

#Padding

padding insets the plot, each side as a fraction (0 to 1) of its size.

<ui-area-chart [data]="visitors" [padding]="{ left: 0.05, right: 0.05 }" />

#Size

The chart fills its container's width and is 200px tall. Set height for another height and width for a fixed width, both in px. Use height rather than a height class, because the preset always sets a height.

<ui-area-chart [data]="visitors" [height]="160" />

#Interaction

#Taps

pointTap emits the tapped { x, y } point. A tap on empty space emits nothing. Set tooltip to false to turn the tooltip off.

<ui-area-chart [data]="visitors" (pointTap)="selected.set($event)" />

pointTap fires inside the touch, so wrap router navigation in setTimeout (see the setTimeout rule).

#Pan and zoom

Set zoomable to let users drag to pan, with +, − and 1:1 buttons. zoomAxes limits it to one axis.

<ui-area-chart [data]="visitors" [zoomable]="true" zoomAxes="x" />

To zoom from your own controls, set showZoomControls to false and call zoomIn(), zoomOut() or resetZoom() on the component. See Pan and zoom for how it behaves.

#API

#UiAreaChart

XYDatum is { x: number; y: number }. ChartPadding is { top?, right?, bottom?, left? }, each a fraction (0–1) of the plot's size, with omitted sides 0. Both are exported from ../components/ui/chart.

#areaChartDefinition

function areaChartDefinition(options: AreaChartOptions): ChartDefinition;

Returns the TanStack Charts definition <ui-area-chart> renders: an areaY fill down to the baseline, a lineY on top, and optional dots. The options are the inputs that shape the chart, with the same defaults: data, color, fillOpacity, baseline, strokeWidth, dotRadius, showDots, smooth, tickCount, showGrid, showXGrid, xAxisLabel, yAxisLabel, padding, xMin, xMax, yMin, yMax, xTickFormat, yTickFormat and tooltip. Size, label, color scheme and zoom are inputs of <ui-chart> instead.

Start from it to add marks of your own, such as a goal line, and render the result with <ui-chart>. For several or stacked areas, build a definition with areaY instead.

import { defineChart, ruleY } from '@tanstack/charts/universal';
import { areaChartDefinition } from '../components/ui/area-chart';

const base = areaChartDefinition({ data: visitors, smooth: true });

protected readonly withGoal = defineChart({
  ...base,
  marks: [...base.marks, ruleY([20], { stroke: 'var(--muted-foreground)' })],
});

#Related

• Chart: several or stacked areas, and other marks
• Line Chart: the line without the fill
• Bar Chart: values as bars