Data display

RangeChart

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

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add RangeChart

InteractionEnhanced runtime

Design sourceBehavior-only contract

← All chart guides · Framework setup · Native counterparts

See it and copy it

Framework example

Explore the live chart, then open its code for Astro, React, or Elements.

A warm start, a cooler weekend

Daily temperature range (°C) · 21–27 September 2026

View chart data

Category	Low	High
Mon	14	24
Tue	16	27
Wed	19	31
Thu	18	29
Fri	15	25
Sat	12	22
Sun	13	24

The band connects each day's low and high. Wednesday peaks at 31°C before temperatures ease into the weekend. Illustrative forecast.

View RangeChart code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { RangeChart } from '@santi020k/lumen-astro'

const data = [
  { high: 24, low: 14, x: 'Mon' },
  { high: 27, low: 16, x: 'Tue' },
  { high: 31, low: 19, x: 'Wed' },
  { high: 29, low: 18, x: 'Thu' },
  { high: 25, low: 15, x: 'Fri' },
  { high: 22, low: 12, x: 'Sat' },
  { high: 24, low: 13, x: 'Sun' }
]
---

<RangeChart
  aria-label="Daily low and high forecast temperatures in degrees Celsius"
  heading="A warm start, a cooler weekend"
  description="Daily temperature range (°C) · 21–27 September 2026"
  caption="The band connects each day's low and high. Wednesday peaks at 31°C before temperatures ease into the weekend. Illustrative forecast."
  {data}
/>

import { RangeChart } from '@santi020k/lumen-react'

const data = [
  { high: 24, low: 14, x: 'Mon' },
  { high: 27, low: 16, x: 'Tue' },
  { high: 31, low: 19, x: 'Wed' },
  { high: 29, low: 18, x: 'Thu' },
  { high: 25, low: 15, x: 'Fri' },
  { high: 22, low: 12, x: 'Sat' },
  { high: 24, low: 13, x: 'Sun' }
]

export const Example = () => (
  <>
    <RangeChart
      aria-label="Daily low and high forecast temperatures in degrees Celsius"
      heading="A warm start, a cooler weekend"
      description="Daily temperature range (°C) · 21–27 September 2026"
      caption="The band connects each day's low and high. Wednesday peaks at 31°C before temperatures ease into the weekend. Illustrative forecast."
      data={data}
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements(['RangeChart'])
</script>

<lumen-range-chart id="example-range-chart"
  aria-label="Daily low and high forecast temperatures in degrees Celsius"
  heading="A warm start, a cooler weekend"
  description="Daily temperature range (°C) · 21–27 September 2026"
  caption="The band connects each day's low and high. Wednesday peaks at 31°C before temperatures ease into the weekend. Illustrative forecast."></lumen-range-chart>

<script type="module">
"use strict";
const data = [
    { high: 24, low: 14, x: 'Mon' },
    { high: 27, low: 16, x: 'Tue' },
    { high: 31, low: 19, x: 'Wed' },
    { high: 29, low: 18, x: 'Thu' },
    { high: 25, low: 15, x: 'Fri' },
    { high: 22, low: 12, x: 'Sat' },
    { high: 24, low: 13, x: 'Sun' }
];

const chart = document.getElementById('example-range-chart')

chart?.setAttribute('data', JSON.stringify(data))
</script>

Edit RangeChart in browser

Framework differences

Elements: Pass data as a JSON attribute. The Elements example serializes the sample data with JSON.stringify; Astro expression bindings are not HTML attributes.

When to use RangeChart

Use for forecast bounds, daily temperature ranges, or another ordered sequence where both limits are meaningful.

The vertical interval shows the two bounds; the band connects adjacent complete observations.
Explain what the bounds mean in the caption: minimum/maximum, forecast limits, or a stated confidence interval. Use formatValue to attach the same unit to both endpoints.

Prepare the data

import type { LumenRangeDatum } from '@santi020k/lumen-core'

const data = [
  { x: 'Mon', low: 17, high: 28 },
  { x: 'Tue', low: 19, high: 31 },
  { x: 'Wed', low: null, high: null }
] satisfies readonly LumenRangeDatum[]

Supply one low/high pair per X identity, in the intended display order. Keep both endpoints finite and ensure low is no greater than high in your application.
A null endpoint removes that interval and breaks the band. The data table still reports each supplied endpoint.
X positions follow input order at equal spacing. Use xLabel for readable category text without changing identity.

Shared data and formatting guidance →

Avoid misleading comparisons

A range does not communicate a median, sample size, or probability by itself. State the statistical meaning of a forecast band.
This component does not expose a time-scale prop. Equal spacing can be misleading for irregular observation times.

Chart accessibility and keyboard guidance →

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add RangeChart

lumen add RangeChart

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add RangeChart --target react

lumen add RangeChart --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add RangeChart --target elements

lumen add RangeChart --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.

Attribute	Values	Default	Description
drilldown	boolean (Astro / Elements attribute)	false	Enables plotted datum actions and an equivalent native button disclosure, including with hidden tables. Astro requires UIPrimitives; Elements owns its lifecycle.
onDatumActivate	(detail: LumenChartDatumActivationDetail) => void (React)	-	Enables React datum actions and receives validated values with raw identities. Navigation and filtering remain application owned.
explore-data-label, datum-action-prefix, datumActionFormatter	string attributes, (context: string) => string property (Elements)	English labels	Localizes the Elements disclosure and datum actions.
labels.exploreData, labels.formatDatumAction	string, (context: string) => string	English labels	Localizes the actions disclosure and each contextual datum button.
data	LumenRangeDatum[]	[]	Provides ordered low and high values for each interval.
formatValue	(value: number) => string	String	Formats interval endpoints in titles and the accessible data table.
tone	LumenChartTone	"series-1"	Selects the tokenized chart tone for intervals and the range area.
showTable	boolean	true	Provides a revealable semantic table containing every range.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Keyboard interactions

Keyboard behavior provided by the Astro UIPrimitives runtime for this component.

Key	Action
Tab	Focus the actions disclosure and its native buttons in document order.
Enter, Space	Toggle the disclosure or activate the focused datum button. Actions remain available when the data table is hidden.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

Event	Target	Detail	When
ui:chart-datum-activate	Astro chart figure or Elements data chart host	LumenChartDatumActivationDetail: series { seriesId, x, y, datumId? }, heatmap { x, y, value, datumId? }, range { x, low, high, datumId? }	Fires once after a plotted datum or its native action button is activated. Requires drilldown. Astro uses UIPrimitives, Elements owns its lifecycle, and React uses onDatumActivate instead.