Heatmap Chart

Visualize matrix data with color-coded cells. Chart.ts heatmaps support custom color scales, cell labels, tooltips, and automatic axis generation. Perfect for activity matrices, correlation tables, and time-based analysis.

$npm install @chartts/core
example.tsx
import { heatmap } from "@chartts/core"

const svg = heatmap({
  data: [
    { day: "Mon", hour: "9am", commits: 5 },
    { day: "Mon", hour: "10am", commits: 12 },
    { day: "Mon", hour: "11am", commits: 8 },
    { day: "Tue", hour: "9am", commits: 3 },
    { day: "Tue", hour: "10am", commits: 18 },
    { day: "Tue", hour: "11am", commits: 22 },
  ],
  x: "hour",
  y: "day",
  value: "commits",
  colorScale: ["#f0fdf4", "#16a34a"],
})

Features

Custom color scale mapping
Sequential, diverging, and categorical palettes
Cell labels and tooltips
Automatic axis generation from data
SVG rendering for crisp display
Tailwind CSS on cells and axes
Under 3kb tree-shaken
Read the DocsSee DemosExamples