Skip to main content
Heat Map turns a market universe into an interactive visual overview. Tile size, grouping, and color help users understand where performance and market weight are concentrated before opening a specific security.

​
Properties

​
Common properties

​
Widget properties

​
Events

​
When to use Heat Map

  • Market and sector overview pages where visual pattern recognition matters
  • Index pages that need market-cap-weighted performance context
  • Discovery dashboards where selecting a tile opens deeper analysis
  • Editorial pages that explain broad participation or sector divergence
Use Top List when users need exact ranking, sorting, and tabular comparison.

​
Core experience

The map should identify its universe, grouping dimension, tile-size metric, color metric, session, and last-update time. Keep a visible legend and display a numeric value inside or alongside each selectable tile. Tile area and color must represent separate, clearly labeled metrics. Avoid making small tiles impossible to focus, read, or select.

​
Data and visualization states

Support loading, empty-universe, no-filter-results, delayed-data, market-closed, entitlement, reconnecting, and error states. Keep the legend synchronized with the actual color scale after filters or metrics change. If values are unavailable for part of the universe, use a neutral unavailable state rather than mapping missing data to zero performance.

​
Responsive behavior

At smaller widths, reduce label density while preserving numeric values for focused or selected tiles. Provide a list or detail panel for tiles that are too small to label. Keep filters and the legend visible without creating horizontal page scrolling.

​
Accessibility

  • Color must not be the only way performance is communicated.
  • Give each tile an accessible label containing symbol, group, and numeric value.
  • Provide keyboard navigation and visible focus for selectable tiles.
  • Use a color scale with sufficient contrast and a neutral midpoint.
  • Offer an equivalent textual or tabular summary when required.

​
Best practices

  • Choose a familiar market universe and label it prominently.
  • Keep the color range stable enough for meaningful comparison.
  • Avoid excessive filters that leave only a few disconnected tiles.
  • Pair tile selection with a quote or chart for further analysis.
  • Test color contrast, missing data, small tiles, and empty filters.
  • Top List adds an exact ranking beside the visual overview.
  • Super Chart opens a selected tile in a detailed chart.