When to use it
Preserve missing measurements as null and provide a zero-inclusive domain. The application owns row ordering.
Data displayReact Native
Dumbbell chart
Compare two measurements per category with connected dots.
Native example
Use Dumbbell chart
Preserve missing measurements as null and provide a zero-inclusive domain. The application owns row ordering.
View captured React Native example
<LumenDumbbellChart
label="Team scores, previous and current quarter"
heading="Progress by team"
data={[
{ id: 'design', label: 'Design', value: 88, reference: 62 },
{ id: 'support', label: 'Support', value: 74, reference: 81 }
]}
domain={{ min: 0, max: 100 }}
referenceLabel="Previous"
valueLabel="Current"
/>Reference
Public API
The primary shared and platform-specific options exposed by LumenDumbbellChart.
| 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. DumbbellChart also accepts referenceLabel (Before). |
| 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 exact values available and uses filled and outlined dots for paired measurements.
Shared component