Components

Range area chart

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

ChartRangeArea plots a band per series instead of a curve: each point is { x, y: [low, high] }. Percentile bands read as one distribution when you send adjacent ranges — p50 – p95, then p95 – p99.

Screenshot of the Range Area Chart block — Range Area Chart`ChartRangeArea`

Usage

src/pages/dashboard.ts

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

static distribution = ChartRangeArea({
  title: "$api.metrics.latency_distribution",
  fetchUrl: "/api/metrics/latency-bands",
  fillOpacity: 0.35,
});

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 Range 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`	–

Recipes

A band with a line on top

rangeArea is also a valid seriesDefs type of a mixed chart, so a band can carry a plain median line.

Next steps

Charts

Colors, annotations, events and the other chart types.

Chart card

Frame the chart with its headline value.

Area chart

A filled trend whose volume matters, stacked or overlaid.

Bar chart

Horizontal bars comparing categories, stacked or grouped.