Heatmap
Show density or intensity across two dimensions using color. Great for time patterns, correlation matrices, and activity tracking.
Usage
import { HeatmapChart } from "@chartts/react"
<HeatmapChart
data={activityData}
x="day"
y="hour"
value="commits"
colorScale={["#0f172a", "#06b6d4"]}
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| x | keyof T | Key for x categories |
| y | keyof T | Key for y categories |
| value | keyof T | Key for cell values |
| colorScale | string[] | Color range from low to high |
| cellRadius | number | Cell border radius. Default: 2 |
Features
- Configurable color scales
- Cell labels
- Tooltip with values
- Responsive cell sizing
- Row/column sorting
- GitHub-style contribution grid
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram