Data display
RangeChart
Shows ordered low-to-high intervals as a tokenized range band.
01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
Weekly forecast
5 available ranges.
View chart data
| Category | Low | High |
|---|---|---|
| Mon | 17 | 28 |
| Tue | 19 | 31 |
| Wed | 16 | 27 |
| Thu | 21 | 34 |
| Fri | 18 | 30 |
Framework usage
Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens andui-* class contract.---
import { RangeChart } from '@santi020k/lumen-astro'
const data = [
{ high: 28, low: 17, x: 'Mon' },
{ high: 31, low: 19, x: 'Tue' },
{ high: 27, low: 16, x: 'Wed' },
{ high: 34, low: 21, x: 'Thu' },
{ high: 30, low: 18, x: 'Fri' }
]
---
<RangeChart
aria-label="Daily forecast temperature range"
caption="Expected daily low and high temperatures in degrees Celsius."
{data}
heading="Weekly forecast"
/>import { RangeChart } from '@santi020k/lumen-react'
export const Example = () => (
<>
<RangeChart
aria-label="Daily forecast temperature range"
caption="Expected daily low and high temperatures in degrees Celsius."
{data}
heading="Weekly forecast"
/>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-range-chart
aria-label="Daily forecast temperature range"
caption="Expected daily low and high temperatures in degrees Celsius."
{data}
heading="Weekly forecast"></lumen-range-chart>02
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-astropnpm add @santi020k/lumen-astrolumen add RangeChartlumen add RangeChartpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add RangeChart --target reactlumen add RangeChart --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add RangeChart --target elementslumen add RangeChart --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| 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. |