Data displayReact Native

Heatmap

Encode a two-dimensional matrix with the canonical sequential scale.

Public APILumenHeatmapReact Native

Native example

Use Heatmap

Use canonical visualization tokens and keep the application data model explicit. Provide a concise factual label, and retain the readable native fallback supplied by the component.

View verified React Native runtime capture

Heatmap rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenHeatmap
  data={activityCells}
  label="Quarterly revenue"
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenHeatmap.

API	Values or type	Default	Description
label	`String`	`Required`	Provides the concise accessible name for the visualization.
data	`Typed native chart data`	`Required`	Supplies finite values and stable identifiers through the shared chart contract.

Native behavior

Design and accessibility

When to use it

Use canonical visualization tokens and keep the application data model explicit. Provide a concise factual label, and retain the readable native fallback supplied by the component.

Accessibility

Presents a concise summary while applications retain labels for every cell.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose