Installation
$ pnpm dlx shadcn@latest add @chartcn/chartgpu/heatmap
Usage
import { ChartcnHeatmap } from "@/components/chart/heatmap";<ChartcnHeatmap config={{}} data={data}>
<ChartcnHeatmap.XAxis />
<ChartcnHeatmap.YAxis />
<ChartcnHeatmap.Legend />
<ChartcnHeatmap.Tooltip />
<ChartcnHeatmap.Heatmap colormap="viridis" />
</ChartcnHeatmap>Examples
Cell gaps and colormaps
Inferno cells
API Reference
| Prop | Type | Default |
|---|---|---|
data | HeatmapData | - |
config | ChartConfig | - |
animation | boolean | AnimationConfig | { duration: 650, easing: "cubicOut" } |
isLoading | boolean | false |
Heatmap
| Prop | Type | Default |
|---|---|---|
colormap | "viridis" | "plasma" | "inferno" | "magma" | "grayscale" | string[] | "viridis" |
cellGapPx | number | 0 |
opacity | number | 1 |
zScale | "linear" | "log" | "linear" |
nullHandling | "transparent" | "lowest" | "highest" | "transparent" |