Build a Stock Market Heat Map Grid UI in SwiftUI

What a market heat map encodes

A stock market heat map turns a table of numbers into a glance. Each tile is a stock, colored by how much it is up or down, green for gains and red for losses, with the intensity showing the size of the move, and in the classic version the tiles are sized by market capitalization, so the biggest companies occupy the most space. In one look you see whether the market is broadly up or down, which sectors are moving, and where the largest swings are, without reading a single percentage. In SwiftUI you build it as a grid or a treemap, using its layout tools, with a color scale mapping change to hue and a tap on a tile opening the detail.

Understanding what it encodes, two dimensions at once, the change as color and the size as area, is the key to building it well. A heat map that only colors equal tiles loses the size dimension; a true treemap carries both, which is why it reads as a market at a glance rather than a colored grid.

Color is the language, so get the scale right

The heat map speaks through color, and the color scale is the most important design decision. Green for up and red for down is the convention, with a neutral tone near zero and deepening saturation for larger moves, so a stock up 5% glows a stronger green than one up half a percent. The scale has to be intuitive at a glance and accessible, because red and green are exactly the pair that colorblind users struggle with, so the design should not rely on hue alone, adding the percentage or an arrow on each tile or offering a colorblind-friendly palette. The neutral midpoint matters too, so a flat market reads as calm rather than alarming.

Getting the scale right is what makes the heat map instantly readable. A poorly tuned scale, where small moves look dramatic or the colors are ambiguous, turns the one job of a heat map, conveying the market at a glance, into a puzzle.

Building the grid and the treemap

The simplest heat map is an equal-size grid, a LazyVGrid or Grid of tiles, each a stock colored by its change, which is quick to build and treats every stock equally. The classic market heat map is a treemap, where tile area is proportional to market cap, so a mega-cap company is a large tile and a small-cap a tiny one, packed to fill the space. The treemap layout, computing rectangles whose areas match values, is the real work, and it is what gives the heat map its characteristic look. Tapping a tile opens a detail, often a small price chart drawn with Swift Charts, and the same fintech-visualization discipline appears in a crypto portfolio pie chart and a profit-and-loss chart.

The choice between grid and treemap is a real one. The grid is easier and fine for a watchlist; the treemap carries the size dimension and is what people picture as a market heat map, so it is worth the extra layout work when the relative size of companies matters.

The layouts compared

There are three levels of heat map, and they differ in how much structure they convey.

Layout	What it shows	Effort
Equal-size grid	Each stock’s change, every tile equal	Low
Treemap sized by market cap	Change plus the relative size of each company	Medium, the classic heat map
Sector-grouped treemap	Change, size, and sector structure	Medium to high, the richest view

The equal grid is the quick option and suits a watchlist where every holding matters equally. A treemap sized by market cap is the classic market heat map, carrying both the change and the size. Grouping the treemap by sector adds a third layer, showing which parts of the market are moving together, and is the richest view. A free VP0 heat-map template starts you on the treemap version, with the tile, the color scale, the layout, and the live-update structure already shaped and exposed through a machine-readable source page, so an agent like Cursor or Claude Code extends a real heat map and you wire the market data. The high-performance charting cousin is a Skia candlestick chart.

Live updates without jank

A heat map is often live, recoloring as prices move during the trading day, and the updates have to be smooth. As a quote changes, the tile’s color animates to its new value rather than snapping, so a sweep of green or red across the board feels like the market breathing rather than a flicker. The trick is to update the color of existing tiles in place rather than rebuilding the whole grid or treemap, which keeps the layout stable while the colors shift. With many tiles updating frequently, the recolor has to be cheap, so the tile is a light view whose color is its main changing property.

This is where a live heat map proves itself. A board that recolors smoothly conveys momentum and feels alive; one that rebuilds and flickers on every tick is distracting and reads as broken, so smooth in-place recoloring is the difference.

Keeping it honest: a heat map is not advice

A market heat map visualizes data, and it should be clear about what it is not. It is a snapshot of price changes, not financial advice, and the colors are a presentation of movement, not a recommendation to buy the green or sell the red. So the heat map should label its timeframe, today, this week, intraday, since a tile’s color means nothing without knowing the period, and it should be honest about data freshness, marking a delayed feed as delayed rather than presenting old prices as live. Where it shows numbers, they come from a real market data source, and the app does not imply a prediction from the pattern.

Keeping that line clear is part of building a financial tool responsibly. A beautiful heat map that nudges users toward chasing the green is a different and riskier product than one that simply shows the market’s movement honestly and leaves the decisions to the user.

Key takeaways: a stock market heat map

• It encodes two dimensions. Change as color and, in a treemap, market cap as tile size.
• The color scale is the language. Intuitive green-to-red, accessible, with a calm neutral midpoint.
• Grid is simple; treemap is the classic. A treemap sized by market cap carries the size dimension.
• Recolor live in place. Animate tile colors on price changes without rebuilding the layout.
• Start from a heat-map template. A free VP0 template gives an agent the tile, scale, and treemap to wire data into.

What to choose

For a stock market heat map, build it from a template that already handles the treemap layout, the color scale, and the live recoloring, because those are the real work and the parts a plain grid skips. A free VP0 heat-map template gives you the tile, the accessible color scale, the treemap sizing, and the live-update structure, so an agent extends a real heat map and you wire your market data, labeling the timeframe and keeping the visualization honest rather than implying advice. An equal-size grid is a fair choice for a simple watchlist, but a treemap sized by market cap is what reads as a market heat map, since it carries both the change and the relative size of each company.

Frequently asked questions

How do I build a stock market heat map in SwiftUI? Build a grid or treemap of tiles, one per stock, colored by its percentage change with green for up and red for down, and in the classic version size each tile by market capitalization so larger companies take more space. Use SwiftUI’s grid or a treemap layout, a color scale that deepens with the size of the move, and tiles that recolor in place as prices change, with a tap opening a detail. Make the color scale accessible by not relying on hue alone. A free heat-map template gives you the tile, the scale, and the treemap layout to start from.

What is the difference between a grid and a treemap heat map? An equal-size grid gives every stock the same tile, colored by its change, which is simple and suits a watchlist where each holding matters equally. A treemap sizes each tile by market capitalization, so a mega-cap company is a large tile and a small-cap a tiny one, which carries a second dimension, the relative size of each company, on top of the change. The treemap is what people picture as a market heat map, and computing the rectangles whose areas match values is the extra work that gives it its characteristic look.

Where can I get a stock market heat map template? The most useful option is a template that already handles the treemap and the color scale, not a plain colored grid. A free VP0 heat-map template provides the tile, the accessible color scale, the treemap sizing, and the live-update structure, with a machine-readable source page, so an agent like Cursor or Claude Code extends a real heat map. You then wire your market data, since the template is the visualization and the data feed is yours. It is built for the treemap that sizes companies by market cap and recolors smoothly on live prices.

How do I make a heat map colorblind-accessible? Do not rely on hue alone, because red and green are exactly the pair colorblind users struggle to tell apart. Add the percentage change or an up or down arrow to each tile so the direction and magnitude are readable without color, offer a colorblind-friendly palette as an option, and use a clear neutral midpoint so a flat market reads as calm. Brightness and saturation can carry some of the signal too. These choices keep the heat map readable for everyone, which matters because conveying the market at a glance is its entire purpose.

Is a stock market heat map financial advice? No, a heat map is a visualization of price changes, not advice, and the colors present movement rather than recommending that you buy the green or sell the red. A trustworthy heat map labels its timeframe, since a tile’s color is meaningless without the period, is honest about delayed data rather than presenting old prices as live, and draws its numbers from a real market data source. It does not imply a prediction from the pattern, and the responsibility for any decision stays with the user. Keeping that separation clear is part of building a financial tool responsibly.