# Heatmap-tinted numeric cells > Live in [demo 60-pivot-expandable](https://svgrid.com/demos/60-pivot-expandable/). > Live demo: Pivot - Sales pipeline - https://svgrid.com/demos/60-pivot-expandable/ ## When Bucket cell values into red/amber/neutral/green tints based on per-column min/max. ## How Key API surface: - `cellClass returns heat-1..heat-5 bucket classes` 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](https://github.com/sv-grid/sv-grid/blob/main/docs/recipes/index.md). ## 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: ```svelte ``` Every chart type the engine draws, on one page: > Live demo: Every chart type - https://svgrid.com/demos/435-chart-type-gallery/ ## See also - [Demo 60-pivot-expandable source](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/60-pivot-expandable.svelte) - [Demo 60-pivot-expandable prompt sidecar](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/prompts/60-pivot-expandable.md) - drop into an LLM context window - [Recipes index](https://github.com/sv-grid/sv-grid/blob/main/docs/recipes/index.md) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/heatmap-cells/ . All docs: https://svgrid.com/llms.txt