Data visualization / Guide
Prepare chart data
Choose honest domains, format values, preserve missing measurements, and validate chart data.
Keep the data honest.
Lumen draws the measurements you provide. Your application owns fetching, aggregation, sorting, units, and the meaning of a change.
A zero is still a result.
Illustrative daily revenue · USD · August 3–5, 2026
- Monday$840
- Tuesday$0
- WednesdayNot recorded
View chart data
| Category | Revenue |
|---|---|
| Monday | $840 |
| Tuesday | $0 |
| Wednesday | Not recorded |
View numeric data and currency formatting
const revenue = [
{ id: 'monday', label: 'Monday', value: 840 },
{ id: 'tuesday', label: 'Tuesday', value: 0 },
{ id: 'wednesday', label: 'Wednesday', value: null }
]
const dollars = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0
})
const formatValue = (value: number): string => dollars.format(value)
// Astro and React: pass revenue to data and this formatter
// to the formatValue prop.
// Elements: chart.valueFormatter = formatValue.const revenue = [
{ id: 'monday', label: 'Monday', value: 840 },
{ id: 'tuesday', label: 'Tuesday', value: 0 },
{ id: 'wednesday', label: 'Wednesday', value: null }
]
const dollars = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0
})
const formatValue = (value: number): string => dollars.format(value)
// Astro and React: pass revenue to data and this formatter
// to the formatValue prop.
// Elements: chart.valueFormatter = formatValue.Zero is a measurement.
Use null for unavailable observations and 0 for a real zero. Comparison rows keep their labels when a value is missing. An empty array shows the empty state; it does not indicate loading.
Use one meaningful scale.
Comparison and bullet domains must contain zero and all displayed measurements. Use a common domain across cards you want readers to compare. Omit domain to let Lumen derive it.
Format at the boundary.
Keep data numeric. Use formatValue in Astro and React, or the valueFormatter property in Elements. The same formatter labels visible values and exact data.
The BulletChart example stores 86 as a percentage point value and appends %. If using Intl.NumberFormat with style: 'percent', store 0.86 instead and use a matching 0–1 domain.
Validate before rendering.
Comparison rows need unique, non-empty IDs, non-empty labels, and finite numbers or null. Invalid input or a truncated domain shows an invalid-data message. Handle network errors and loading in your application with ErrorState and Skeleton.