Heatmap · Components · AntelopeJS DMS

ChartHeatmap colors a grid of cells by intensity: one series per row, each point { x, y } with y the value. Use it for activity across two dimensions — hours by weekday, routes by status class.

Screenshot of the Heatmap block — Heatmap`ChartHeatmap`

Usage

src/pages/dashboard.ts

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

static logins = ChartHeatmap({
  title: "$security.logins.by_hour",
  fetchUrl: "/api/security/logins/heatmap",
  shadeIntensity: 0.6,
});

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 Heatmap 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"`	–
`shadeIntensity`Appearance	`number`	–
`distributed`Appearance	`boolean`	–

Recipes

One color per row

distributed: true scales the shading of each row on its own, so a quiet row still shows its peaks.

Next steps

Charts

Colors, annotations, events and the other chart types.

Chart card

Frame the chart with its headline value.