Heatmap Chart ^0.1.18

Color-coded matrix for density, correlation, or temporal patterns. Accepts 2D arrays or flat { x, y, value } cells.

Basic

8

25

<VxHeatmapChart
  :data="[
    [12, 18, 8, 14],
    [22, 16, 9, 20],
    [18, 14, 11, 25],
  ]"
  :xLabels="['Q1','Q2','Q3','Q4']"
  :yLabels="['Product A','Product B','Product C']"
  showValues
/>

Activity by hour / day

0

24

<VxHeatmapChart
  :data="activity"
  :xLabels="['00','03','06','09','12','15','18','21']"
  :yLabels="['Mon','Tue','Wed','Thu','Fri','Sat','Sun']"
  showValues
  colorStart="#f0fdf4"
  colorEnd="#16a34a"
/>

Sales per country / month

0

97

<VxHeatmapChart :data="sales" :xLabels="months" :yLabels="countries" />

Correlation matrix

-1

1

<VxHeatmapChart
  :data="correlation"
  :xLabels="vars"
  :yLabels="vars"
  showValues
  colorStart="#fee2e2"
  colorEnd="#7c3aed"
  :min="-1"
  :max="1"
/>

GitHub-style contributions

0

12

<VxHeatmapChart
  :data="githubMatrix"
  :cellSize="12"
  :cellGap="3"
  :cellRadius="2"
  :axis="false"
  colorStart="#f1f5f9"
  colorEnd="#16a34a"
/>

No gaps (tight grid)

0

97

<VxHeatmapChart :data="data" :cellGap="0" :cellRadius="0" />

Custom gradient

0

24

<VxHeatmapChart :data="data" colorStart="#fdf4ff" colorEnd="#c026d3" />

Flat cell format

5

9

<VxHeatmapChart
  :data="[
    { x: 'Mon', y: 'Alice', value: 8 },
    { x: 'Tue', y: 'Alice', value: 6 },
    ...
  ]"
  :xLabels="['Mon','Tue','Wed']"
  :yLabels="['Alice','Bob']"
  showValues
/>

Props

Prop	Type	Default	Description
data	number[][] | HeatmapCell[]	[]	2D matrix or flat cells
xLabels / yLabels	(string | number)[]	[]	Column/row names
height	number	auto	Override SVG height
cellSize	number	auto	Override cell size
cellGap	number	2	Gap between cells
cellRadius	number	3	Corner radius
colorStart	string	#eef2ff	Gradient start
colorEnd	string	#4f46e5	Gradient end
nullColor	string	var(--muted)	Missing-cell color
min / max	number	auto	Force color domain
showValues	boolean	false	Print value in cell
axis	boolean	true	Show labels
tooltip	boolean	true	Show hover tooltip
legend	boolean	true	Show color legend

Events

Event	Payload
hover	{ row, col, value }
click	{ row, col, value }