Data displayReact Native

Range chart

Render ordered low-to-high intervals as a tokenized range band.

Public APILumenRangeChartReact Native

Native example

Use Range chart

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

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

<LumenRangeChart
  data={forecastRanges}
  label="Quarterly revenue"
/>

Reference

Public API

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

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 low and high values.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose