Ripl

Appearance

Heatmap Chart ​

The Heatmap Chart displays data as a matrix of colored cells, where color intensity encodes each cell's value. It's ideal for spotting patterns across two categorical dimensions — time-of-day vs day-of-week, for example. Cells animate smoothly between values on update, and the color range is configurable via a [low, high] color tuple.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createHeatmapChart,
} from '@ripl/charts';

const chart = createHeatmapChart('#container', {
    data: [...],
    xBy: 'hour',
    yBy: 'day',
    value: 'value',
    xCategories: ['9am', '10am', '11am'],
    yCategories: ['Mon', 'Tue', 'Wed'],
});

Options ​

  • data — The data array (one item per cell)
  • xBy — Accessor for the x-axis category
  • yBy — Accessor for the y-axis category
  • value — Accessor for the cell value
  • xCategories — Ordered list of x-axis categories
  • yCategories — Ordered list of y-axis categories
  • colorRange — Tuple of [lowColor, highColor] hex strings
  • borderRadius — Cell corner radius (default 2)