Developer guide · FastPlotJs 0.3.0

JavaScript heatmap

Use a heatmap to compare numeric values across two sets of categories. Each colored cell represents one x/y pair, so patterns in a small grid are easy to scan.

Use this example Installation

Live example

Values across days and times

The chart below uses the FastPlotJs browser demonstration module served with this site. The 0.3.0 package preserves the same public API.

Day and time gridLoading chart…

Copy the code

Render it in your project

Install fastplotjs@0.3.0 with npm install fastplotjs in a browser project with a JavaScript bundler. Add this Canvas before the module runs:

<canvas id="chart" width="800" height="340"></canvas>

Import the public package root. The data and color scale match the live example.

import { createChart } from "fastplotjs";

const canvas = document.getElementById("chart");
const chart = createChart(canvas, {
  type: "heatmap",
  engine: "ts",
  data: [
    { x: "Mon", y: "AM", value: 12 },
    { x: "Tue", y: "AM", value: 34 },
    { x: "Wed", y: "AM", value: 22 },
    { x: "Mon", y: "PM", value: 27 },
    { x: "Tue", y: "PM", value: 48 },
    { x: "Wed", y: "PM", value: 39 },
  ],
  heatmap: {
    xCategories: ["Mon", "Tue", "Wed"],
    yCategories: ["AM", "PM"],
    minValue: 0,
    maxValue: 50,
    colorStops: [
      { offset: 0, color: "#172554" },
      { offset: 0.5, color: "#2563eb" },
      { offset: 1, color: "#fef08a" },
    ],
    cellGap: 2,
    cornerRadius: 3,
    cellLabels: true,
    colorScaleLegend: true,
  },
});

// Keep chart to call updateOptions(), resize(), or destroy() later.

How it works

Data and behavior

Each item supplies x, y, and a numeric value. The explicit category arrays fix the grid order, while minValue, maxValue, and colorStops define the displayed scale. The example also shows cell values and a color legend.

Choose a range that represents your data. This example uses a linear color scale; the logarithmic scale requires positive values. The ts engine needs no optional Rust or WebAssembly initialization. See the heatmap options reference for all fields.

For an ordered x/y series instead of a grid, continue with the line chart guide.