Heatmap Chart
Three powerful heatmap variants — grid with crosshair highlight, radial polar clock, and a stock-market treemap where cell size encodes market cap and color encodes price change.
Grid + Cross-Highlight
Radial / Polar Clock
Stock Treemap
Color Interpolation
Color Legend
Responsive
TypeScript
Three Variants — Switch Live
Grid, Radial, and Stock with different datasets — all from the same component
Loading…
Variant:
Color:
Installation
Get started with the HeatmapChart component in just a few steps.
Quick Install
bash
npx mario-charts@latest add heatmapZero Lock-in Philosophy
The component is fully yours to own, modify, and customize.
Examples
Dedicated examples for each variant.
Stock Market Treemap
Cell area = market cap, color = daily % change. Negative red, positive green — just like Finviz.
Loading…
Radial / Polar Clock — Hourly Traffic
Cyclical patterns rendered as concentric rings. Each angle = hour, each ring = day of week.
Loading…
Grid — Cross-Highlight on Hover
Hover any cell to see its entire row and column dim — a crosshair effect not found in standard chart libraries.
Loading…
Loading State
Error State
Chart Error
Failed to load data
Empty State
No Data
There's no data to display
API Reference
Complete TypeScript interface with all available props and configurations.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | Array of data objects |
xrequired | keyof T | — | Column / angular axis / stock label key |
yrequired | keyof T | — | Row / ring axis key (not used for stock) |
valuerequired | keyof T | — | Numeric value key — color intensity for grid/radial, % change for stock |
weight | keyof T | — | Area weight key for stock treemap (e.g. marketCap). Defaults to equal area. |
variant | 'grid' | 'radial' | 'stock' | 'grid' | grid: standard with cross-highlight; radial: polar clock rings; stock: treemap sized by weight |
colorScheme | 'blue' | 'green' | 'amber' | 'purple' | 'diverging' | 'blue' | Built-in color scheme. Stock variant uses red/green regardless unless colorFrom/colorTo are set. |
colorFrom | string | — | Override low-value color (hex). For stock: overrides the negative/red end. |
colorTo | string | — | Override high-value color (hex). For stock: overrides the positive/green end. |
showLabels | boolean | true | Show axis labels |
showLegend | boolean | false | Show color legend swatch |
cellRadius | number | 4 | Cell border radius in pixels (grid variant) |
height | number | 320 | Height of the chart in pixels |
loading | boolean | false | Show loading skeleton state |
error | string | null | null | Error message to display |
animation | boolean | true | Enable entrance animation |
onClick | (item: T, colLabel: string, rowLabel: string) => void | — | Callback on cell click |
className | string | — | Additional CSS classes for the container |