Heatmap Chart

Grid-based heatmap for visualizing 2D data with color intensity.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/heatmap-chart.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Usage

How to use this component in your code.

<HeatmapChart
  data={[
    { row: "Mon", col: "9am", value: 18 },
    { row: "Mon", col: "12pm", value: 45 },
    { row: "Tue", col: "9am", value: 22 },
    { row: "Tue", col: "12pm", value: 51 },
  ]}
  color="var(--chart-1)"
  showValues
  showLegend
/>