When to use it
Preserve missing measurements as null and provide a zero-inclusive domain. The application owns row ordering.
Data displayReact Native
Lollipop chart
Rank categories using a dot and a zero-based stem.
Native example
Use Lollipop chart
Preserve missing measurements as null and provide a zero-inclusive domain. The application owns row ordering.
View captured React Native example
<LumenLollipopChart
label="Team scores, current quarter"
heading="Team performance"
data={[{ id: 'design', label: 'Design', value: 88 }]}
domain={{ min: 0, max: 100 }}
valueLabel="Score"
/>Reference
Public API
The primary shared and platform-specific options exposed by LumenLollipopChart.
| API | Values or type | Default | Description |
|---|---|---|---|
| data | LumenComparisonDatum[] | Required | Unique id, category label, nullable finite value, optional reference and tone. Input order is preserved. |
| label, heading, description | String | label required | Provides the accessible name and optional visible context. |
| domain | Finite numeric range | Automatic | Includes zero and all displayed measurements. React Native uses { min, max }; SwiftUI and Compose use closed ranges. |
| valueLabel, labels | Localized chart labels | English | Names the measure and localizes empty, missing, invalid, and disclosure text. |
| formatValue / labels.formatValue | Number formatter | Platform default | React Native accepts formatValue; SwiftUI and Compose use labels.formatValue. |
| showData | Boolean | true | Provides the expandable exact values. |
Native behavior
Design and accessibility
Accessibility
Keeps category labels and exact values available independently of the decorative stems and dots.
Shared component