Sparkline

Tiny inline trend chart.

A compact sparkline for trends, rendered as bars, a line, or a filled area. Fix the scale with `min`/`max` to compare rows, colour by `trend` (auto derives up/down/flat → success/danger/muted), and flex it to the cell with `fluid`/`width`. Decorative by default; the auto-generated summary (or `label`) names it for assistive tech.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Sparkline } from 'dssoca';
</script>

<Sparkline data={[3, 7, 4, 9, 6, 11]} label="req/min, last 6h" />
<Sparkline data={[12, 9, 11, 6, 4]} trend="auto" variant="area" fluid />

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-spark" data-variant="bars" role="img" aria-label="requests">
  <i aria-hidden="true" style="height:8%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:33.33333333333333%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:16.666666666666664%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:83.33333333333334%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:50%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:100%;background:var(--ss-primary)"></i>
  <i aria-hidden="true" style="height:66.66666666666666%;background:var(--ss-primary)"></i>
</div>

Bars are inline heights; line/area variants are computed SVG — copy as rendered.

Props

Prop	Type	Default	Description
`data`	`number[]`	—	Required. Series values.
`variant`	`'bars' \| 'line' \| 'area'`	`'bars'`	Rendering style.
`color`	`string`	`var(--ss-primary)`	Bar/line fill. Ignored when `trend` resolves to a direction.
`trend`	`'auto' \| 'up' \| 'down' \| 'flat' \| 'none'`	`'none'`	Colour by direction; `auto` derives first-vs-last → success/danger/muted.
`min`	`number`	—	Lower scale bound. Defaults to the data min — set to fix the scale across rows.
`max`	`number`	—	Upper scale bound. Defaults to the data max — set to fix the scale across rows.
`fluid`	`boolean`	`false`	Flex the chart to fill its container width (table-cell friendly).
`width`	`string`	—	Explicit CSS width (e.g. '120px', '100%'); overrides the intrinsic width.
`label`	`string`	—	Accessible name; overrides the auto-generated summary (sets role="img").
`summary`	`string`	—	Replace the auto-generated screen-reader summary entirely.
`valueFormat`	`(v: number) => string`	—	Format a value for the screen-reader summary (e.g. v => v + "%").
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.