Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | '' | |
description | string | '' | |
data | array | [] | |
decimals | number | 0 | |
tone | '' | neutral | primary | secondary | tertiary | error | neutral | |
appearance | gradient | line | solid | gradient | |
curve | linear | natural | step | linear |
StellarUI
<stellar-sparkline>
Inline SVG trend chart for compact data-display surfaces.
Properties
Preview
Markup
<stellar-sparkline
label="Revenue trend"
description="Last 7 days"
data="[10,25,18,30,26,38]"
decimals="1"
tone="primary"
>
</stellar-sparkline>API
Complete props, events, slots, and implementation notes for the shipped sparkline component.
Events
| Event | Source | Notes |
|---|---|---|
| custom events | none | stellar-sparkline is display-only and does not emit custom events. |
Slots
| Slot | Notes |
|---|---|
| none | This component has no slots. It renders one inline SVG chart from the JSON array data prop. |
Notes
- The public tag is `stellar-sparkline`, and it keeps a small surface: `tone`, `label`, `description`, `data`, `decimals`, `appearance`, and `curve`.
- It renders visible label and description text around one inline SVG sized from the host `font-size`, and the bold metric is derived from the last data point through the shared number formatter.
- `data` is a JSON numeric array, `tone` sets the local color ramp, `appearance` switches between gradient, line, and solid fills, and `curve` controls how points connect.
- Because this repo defaults to light DOM, each instance uses its own gradient id so multiple sparklines can render on the same page without SVG fill collisions.