Heatmap/Coldmap Feature

The Heatmap Feature provides dynamic color-based visualizations for grid cells, making it easy to interpret numerical data at a glance. By mapping cell values to color gradients, this feature enhances data visibility and helps users quickly identify patterns.

---

Key Highlights

• Heatmap and Coldmap Modes:

  • Heatmap: Red-to-green gradient for highlighting data intensity.
  • Coldmap: Shades of blue for cooler, more subtle visualizations.

• Customizable Value Ranges: Automatically normalizes values between a defined minValue and maxValue.

• WCAG-Compliant Font Colors: Ensures text remains readable by dynamically adjusting font color (black/white) based on the background’s luminance.

---

Example Configuration

To enable the heatmap feature, set a custom cell template on the desired column:

import { heatmapRenderer } from './heatmap';

grid.columns = [
  {
    name: 'Score',
    prop: 'score',
    minValue: 0, // Minimum value for normalization
    maxValue: 100, // Maximum value for normalization
    colorMap: 'heatmap', // Choose 'heatmap' or 'coldmap'
    cellTemplate: heatmapRenderer, // Apply the heatmap renderer
  },
];