dashboardcn
2

Heatmap Chart

PreviousNext

A matrix heatmap with a row per line and a column per label, e.g. weekday by hour, with hover highlighting and tooltips.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
00
02
04
06
08
10
12
14
16
18
20
22
LessMore
import { HeatmapChart } from "@/components/ui/heatmap-chart"

const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/heatmap-chart.json

Also installs tooltip from shadcn/ui if missing.

Usage

import { HeatmapChart } from "@/components/ui/heatmap-chart"

<HeatmapChart
  rows={[
    { label: "Mon", values: [12, 48, 210, 320, 260, 80] },
    { label: "Tue", values: [10, 52, 230, 340, 250, 70] },
  ]}
  columns={["00", "04", "08", "12", "16", "20"]}
  unit="sessions"
/>

Examples

Regions by month

Any two axes work. Set color for the accent and scale to "sqrt" to spread out small values.

North America
Europe
Asia Pacific
Latin America
Middle East
Africa
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
LessMore
"use client"

import { HeatmapChart } from "@/components/ui/heatmap-chart"