The goal of HeatmapComponent is to provide a tool for visualizing two-dimensional data in the form of grid heatmaps. It focuses on interactivity, performance, and customizability.

Features

Data type flexibility: appropriate for 2D arrays of numerical data, categorical data, and more complex data types
Customizable color scheme
Interactivity:
- Zooming (currently only in x-axis direction)
- Markers: highlighting current column, row, and data item
- Tooltips: showing custom content when the user hovers or clicks a data item
- Brushing: interactive selection of 2D regions
Efficient canvas-based rendering: smooth visualizations even with millions of data items
Integrability with other components via exposed events (hover, select, zoom...)
Extensibility: new behaviors can be added via extensions

What it doesn't do

Visualization of data that don't fit into a 2D grid
Other shapes than rectangles
Axis labeling
Data loading or modification via UI

Live demos

https://pdbeurope.github.io/heatmap-component/ (deployed from main branch)

Documentation

Documentation for the latest release (v1.2.0)

[1.2.0] - 2025-07-14

Fixed canvas resize handling
Show "pointer" cursor when hovering over a cell with data
Adjust canvas context size for browser zoom and physical screen resolution
Add getParams() to extensions

FAQs

What is heatmap-component?

Is heatmap-component popular?

Is heatmap-component well maintained?

Package last updated on 14 Jul 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

heatmap-component