Components

Area chart

A filled trend whose volume matters, stacked or overlaid.

ChartArea fills the space under each line. Use it when the volume matters as much as the trend, and stacked: true to show how series add up to a total.

Screenshot of the Area Chart block — Area Chart`ChartArea`

Usage

src/pages/dashboard.ts

import { ChartArea } from "@antelopejs/interface-dms/base/chart";

static traffic = ChartArea({
  title: "$marketing.traffic.by_channel",
  fetchUrl: "/api/marketing/traffic",
  periodScope: "marketing",
  stacked: true,
  fillOpacity: 0.4,
});

The route answers { series } in the shape listed under Data shapes. Wrap the chart in a ChartCard to add a headline value and a comparison.

Options

Options of the Area Chart block
Option	Type	Default
`title`Content	`string`	–
`description`Content	`string`	–
`color`Appearance	`string \| string[]`	–
`height`Appearance	`string`	–
`width`Appearance	`number`	–
`showTooltip`Appearance	`boolean`	`true`
`showLegend`Appearance	`boolean`	`true`
`legendPosition`Appearance	`"top" \| "bottom"`	–
`showGrid`Appearance	`boolean`	`true`
`yRange.min`*Appearance	`number`	–
`yRange.max`*Appearance	`number`	–
`comparisonStyle`Appearance	`"dashed" \| "solid" \| "dimmed"`	–
`smooth`Appearance	`boolean`	`true`
`curve`Appearance	`"smooth" \| "straight" \| "stepline"`	–
`xaxisType`Appearance	`"category" \| "datetime" \| "numeric"`	–
`fillOpacity`Appearance	`number`	–
`stacked`Appearance	`boolean`	–

Recipes

Inside a chart card

ChartArea is the usual chart of a chart card: ChartCard({ …, chart: ChartArea({ comparisonStyle: "dashed" }) }).

Next steps

Charts

Colors, annotations, events and the other chart types.

Chart card

Frame the chart with its headline value.

Line chart

A trend over time, one line per series, with reference lines and a synced crosshair.

Range area chart

A filled band between a low and a high per point — percentiles, confidence intervals, forecasts.