Data display
Sparkline
Shows a compact, text-labelled trend beside an existing metric.
← All chart guides · Framework setup · Native counterparts
01
See it and copy it
Framework example
Explore the live chart, then open its code for Astro, React, or Elements.
View Sparkline 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 { Card, CardContent, Sparkline, Stat, StatDescription, StatLabel, StatTrend, StatValue } from '@santi020k/lumen-astro'
const values = [1820, 2160, 2480, 2240, 2860, 3120, 3740]
---
<Card style="width: 100%; max-width: 28rem">
<CardContent>
<Stat variant="bare">
<StatLabel>Weekly downloads</StatLabel>
<StatValue>18,420</StatValue>
<StatDescription>Illustrative week · 21–27 September 2026</StatDescription>
<Sparkline
area
label="Daily downloads rose from 1,820 on Monday to a weekly peak of 3,740 on Sunday"
style="width: 100%; height: 4rem; margin-block: 1rem"
{values}
/>
<StatTrend tone="success">3,740 downloads on the strongest day</StatTrend>
</Stat>
</CardContent>
</Card>import { Card, CardContent, Sparkline, Stat, StatDescription, StatLabel, StatTrend, StatValue } from '@santi020k/lumen-react'
const values = [1820, 2160, 2480, 2240, 2860, 3120, 3740]
export const Example = () => (
<>
<Card style={{ "width": "100%", "maxWidth": "28rem" }}>
<CardContent>
<Stat variant="bare">
<StatLabel>Weekly downloads</StatLabel>
<StatValue>18,420</StatValue>
<StatDescription>Illustrative week · 21–27 September 2026</StatDescription>
<Sparkline
area
label="Daily downloads rose from 1,820 on Monday to a weekly peak of 3,740 on Sunday"
style={{ "width": "100%", "height": "4rem", "marginBlock": "1rem" }}
values={values}
/>
<StatTrend tone="success">3,740 downloads on the strongest day</StatTrend>
</Stat>
</CardContent>
</Card>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements(['Card', 'CardContent', 'Sparkline', 'Stat', 'StatDescription', 'StatLabel', 'StatTrend', 'StatValue'])
</script>
<lumen-card style="width: 100%; max-width: 28rem">
<lumen-card-content>
<lumen-stat variant="bare">
<lumen-stat-label>Weekly downloads</lumen-stat-label>
<lumen-stat-value>18,420</lumen-stat-value>
<lumen-stat-description>Illustrative week · 21–27 September 2026</lumen-stat-description>
<lumen-sparkline id="example-sparkline"
area
label="Daily downloads rose from 1,820 on Monday to a weekly peak of 3,740 on Sunday"
style="width: 100%; height: 4rem; margin-block: 1rem"></lumen-sparkline>
<lumen-stat-trend tone="success">3,740 downloads on the strongest day</lumen-stat-trend>
</lumen-stat>
</lumen-card-content>
</lumen-card>
<script type="module">
"use strict";
const values = [1820, 2160, 2480, 2240, 2860, 3120, 3740];
const chart = document.getElementById('example-sparkline')
chart?.setAttribute('values', JSON.stringify(values))
</script>When to use Sparkline
Use beside a Stat or a table metric when the overall direction matters more than individual coordinates.
- The endpoint marks the latest available value. area adds a fill below the line; showEndpoint controls the final dot.
- Keep the current value and units visible beside the sparkline. Its SVG is decorative; the labeled wrapper provides the accessible meaning.
Prepare the data
const values: readonly number[] = [42, 48, 63, 58, 74, 91]
const label = 'Weekly downloads increased from 42 to 91'- Supply finite numbers in the order readers should follow. Values are spaced by their array index.
- The required label is the textual explanation of the trend. Include its measure, period, and a useful observation.
Avoid misleading comparisons
- This compact chart has no axes, exact-data disclosure, or time-scale prop. Use LineChart when users need to compare individual values or irregular intervals.
- Do not replace missing observations with zero to satisfy the number array. Choose a chart with an explicit nullable data contract when gaps matter.
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 Sparklinelumen add Sparklinepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Sparkline --target reactlumen add Sparkline --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Sparkline --target elementslumen add Sparkline --target elementsAPI 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 |
|---|---|---|---|
| values | number[] | required | Provides ordered values for the compact trend. |
| label | string | required | Communicates the trend in text because the SVG is intentionally decorative. |
| area | boolean | false | Adds a subtle tokenized fill below the line. |
| showEndpoint | boolean | true | Marks the latest value with a color-independent endpoint. |
| tone | LumenChartTone | "series-1" | Selects a categorical or explicitly semantic chart tone. |
| 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. |