dashboardcn
2

Heatmap Chart Card

PreviousNext

A card with a headline total, a delta, an optional period switcher, and a matrix heatmap whose hovered cell swaps into the headline.

Active users
8,327+8.2%
vs previous 7 days
Mon
Tue
Wed
Thu
Fri
Sat
Sun
00
02
04
06
08
10
12
14
16
18
20
22
LessMore
"use client"

import * as React from "react"

Installation

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

Also installs card, tooltip, tabs from shadcn/ui if missing.

Usage

import { HeatmapChartCard } from "@/components/heatmap-chart-card"

<HeatmapChartCard
  title="Active users"
  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"
  delta={0.082}
  deltaLabel="vs previous 7 days"
  periods={[
    { value: "7d", label: "7D" },
    { value: "30d", label: "30D" },
  ]}
  onPeriodChange={setPeriod}
/>