ApexCharts Heatmap with Colour Buckets

A 2D heatmap where every cell is coloured by which numeric bucket its value falls into — instead of a continuous gradient, the colours come from a small set of named ranges (`0-25 = blue`, `25-50 = teal`, `50-75 = orange`, `75-100 = red`). ApexCharts' heatmap supports this via `p

Template details

  • chart
  • heatmap
  • buckets
  • categorical
  • matrix
  • apexcharts
  • apex

When to use this template

This visualization clearly highlights when data points fall into predefined critical ranges or zones, making it easy to spot patterns of exceeding or falling below specific thresholds. Analysts use it to quickly identify areas of concern or success, such as periods of high risk, peak performance, or resource over-allocation, by categorizing values rather than showing a continuous spectrum.

  • Data with two distinct categorical dimensions (rows and columns).
  • Numeric values whose significance is tied to specific, predefined ranges.
  • When identifying values that cross critical thresholds is the primary goal.
  • Datasets where exact values are less important than their categorical status.
  • Moderate cardinality for both row and column dimensions (e.g., 5-50).
  • Values that benefit from being framed as 'good', 'warning', or 'critical' zones.

Browse all Koan templates