React Heatmap

Visualize matrix data with a React heatmap component. Automatic color scales, cell labels, tooltips, and Tailwind CSS styling. Renders as SVG for crisp display at any resolution.

$npm install @chartts/react
example.tsx
import { HeatmapChart } from "@chartts/react"

export function ActivityHeatmap() {
  const data = [
    { day: "Mon", hour: "9am", value: 12 },
    { day: "Mon", hour: "10am", value: 28 },
    { day: "Tue", hour: "9am", value: 18 },
    { day: "Tue", hour: "10am", value: 45 },
  ]

  return (
    <HeatmapChart
      data={data}
      x="hour"
      y="day"
      value="value"
      className="h-64"
      colorScale={["#f0fdf4", "#22c55e"]}
    />
  )
}

Features

Automatic color scale mapping
Custom color palettes
Cell labels and tooltips
SVG rendering for crisp display
Tailwind className on cells, axes, labels
Responsive with automatic sizing
Under 3kb tree-shaken
Read the DocsSee DemosExamples