Heatmap-tinted numeric cells

Live in demo 60-pivot-expandable.

Open the live example: Pivot - Sales pipeline (Pivot Grid)

When

Bucket cell values into red/amber/neutral/green tints based on per-column min/max.

How

Key API surface:

See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.

The same numbers as a heat map chart

Tinted cells read one number at a time; a heat map chart reads the whole grid of them at once. rowsToChartSpec with a series column and type: 'heatmap' builds it from the same rows:

<script lang="ts">
  import { SvChart, rowsToChartSpec } from '@svgrid/grid'
  const rows = [
    { region: 'North', quarter: 'Q1', revenue: 42 }, { region: 'North', quarter: 'Q2', revenue: 61 }, { region: 'North', quarter: 'Q3', revenue: 55 },
    { region: 'South', quarter: 'Q1', revenue: 30 }, { region: 'South', quarter: 'Q2', revenue: 38 }, { region: 'South', quarter: 'Q3', revenue: 72 },
    { region: 'East', quarter: 'Q1', revenue: 18 }, { region: 'East', quarter: 'Q2', revenue: 24 }, { region: 'East', quarter: 'Q3', revenue: 29 },
  ]
  const spec = { ...rowsToChartSpec(rows, { type: 'bar', category: 'quarter', value: 'revenue', series: 'region' }), type: 'heatmap' as const, height: 220 }
</script>

<SvChart {spec} />

Every chart type the engine draws, on one page:

Open the live example: Every chart type (Charts)

See also

Live examples

  • Pivot - Sales pipeline - Polished pivot view: KPI strip, region/sales-person rows, quarter columns, two measures, expand-all/collapse-all toolbar, heatmap tinting.
  • Every chart type - Every chart type from one dataset, thirty live thumbnails: bar, horizontal bar, line, area, lollipop, dumbbell, range bar, range area, pareto, radial column, radial bar, nightingale, pie / donut, tree map, sunburst, funnel, waterfall, sankey, chord, radar, heat map, scatter, box plot, histogram, gauge, bullet, calendar, stream, candlestick and OHLC. Click a card for the full-size chart and its variants: classic / hollow / Heikin-Ashi candles, funnel / pyramid / cone, wiggle / silhouette streams, stacking. Every spec is built with the helpers the grid chart panel uses.

Related articles