# SvSparkline
A tiny inline chart - line, area, bar, or win/loss - drawn from a plain number
array, with no chart library.
`SvSparkline` is a thin SVG renderer over the pure `buildSparkline` geometry
(the same code behind the grid's sparkline cell), so a trend fits inline next to
a number, inside a table cell, or in a [SvStat](https://svgrid.com/docs/help/ui-components/sv-stat/) card. It defaults to
the grid's `--sg-accent` color and sizes to a compact 88x22 by default. Pass
`negativeColor` for bar and win/loss charts that split positive from negative.
Related: [SvStat](https://svgrid.com/docs/help/ui-components/sv-stat/) · [SvGauge](https://svgrid.com/docs/help/ui-components/sv-gauge/) · [Range & meters overview](https://svgrid.com/docs/help/ui-components/range/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvSparkline` starter into your app:
Prefer to see it first? `npx @svgrid/ui try sparkline` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvSparkline` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvSparkline } from '@svgrid/grid'
```
## Example
```svelte
```
## Props
| Prop | Type | Default | Description |
| --------------- | ------------------------------------------- | -------- | --------------------------------------------------------------- |
| `data` | `ReadonlyArray` | required | The series to plot. |
| `type` | `line` \| `area` \| `bar` \| `winloss` | `line` | Chart form. |
| `width` | `number` | `88` | SVG width in px. |
| `height` | `number` | `22` | SVG height in px. |
| `color` | `string` | - | Stroke/fill color; defaults to `--sg-accent`. |
| `negativeColor` | `string` | - | Color for negative bars (bar / win-loss). |
| `lineWidth` | `number` | - | Stroke width for line and area. |
| `min` | `number` | - | Fix the low end of the scale instead of deriving it. |
| `max` | `number` | - | Fix the high end of the scale instead of deriving it. |
| `lastPoint` | `boolean` | `true` | End-cap dot on the last point (line / area). |
| `ariaLabel` | `string` | - | Accessible name; defaults to `"sparkline"`. |
## Examples
### Chart types
Switch `type` to match the data. `line` and `area` suit continuous trends; `bar`
compares discrete values; `winloss` flattens to up/down bars for streaks:
```svelte
```
### Shared scale across a column
Fix `min` and `max` so several sparklines in a table share one scale and stay
visually comparable row to row:
```svelte
{#each rows as r}
{/each}
```
### Inside a stat card
Sparklines slot straight into [SvStat](https://svgrid.com/docs/help/ui-components/sv-stat/)'s `chart` snippet for a KPI
with a trend:
```svelte
{#snippet chart()}{/snippet}
```
### Live-updating trend
Keep a fixed-length window of recent readings in `$state` and the chart redraws
as you push new points - a lightweight live monitor:
```svelte
```
Tip: fix `min` and `max` for a live series so the baseline stays put instead of
rescaling every time a new high or low arrives.
## Accessibility
- Renders `role="img"` with an `aria-label` so the chart announces as a single
image rather than a run of shapes.
- Set a descriptive `ariaLabel` (e.g. the metric and direction); the default is
just `"sparkline"`.
- Purely decorative in most layouts - pair it with the numeric value it trends.
## The four types
`line` and `area` read as a trend, `bar` as discrete periods, and `winloss`
throws the magnitude away to show only the sign - which is the right chart when
the question is "how often were we up".
```svelte
```
`lastPoint` marks the current value, which is what makes a sparkline in a table
row readable at a glance.
## See also
- [Feedback overview](https://svgrid.com/docs/help/ui-components/feedback/) - the status and display family at a glance.
- [SvStat](https://svgrid.com/docs/help/ui-components/sv-stat/) - the KPI card that hosts a sparkline.
- [SvGauge](https://svgrid.com/docs/help/ui-components/sv-gauge/) - a radial display for a single value.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-sparkline/ . All docs: https://svgrid.com/llms.txt