Sparklinebeta

Tiny inline trend line — no axes — sized to flow in table cells, cards, or text.

Playground

Area fill

End point

Width (px)

Height (px)

Stroke

<script lang="ts">
  import { Sparkline } from '@urbicon-ui/blocks';

  const data = [4, 6, 5, 8, 7, 10, 9, 12, 11, 14];
</script>

<Sparkline
  {data}
  height={40}
  showEndPoint
  width={160}
/>

01 Examples

Line vs. area

A bare trend line, and the same data with area filled — both shrink to whatever width and height you give them.

<Sparkline data={up} />
<Sparkline area data={up} />

In a stat card

A KPI number paired with its recent trend — the canonical sparkline use case.

Revenue (7d)

€42k

<div class="border-border-subtle bg-surface-elevated w-56 rounded-2xl border p-4">
  <p class="text-text-tertiary text-xs">Revenue (7d)</p>
  <div class="mt-1 flex items-end justify-between gap-3">
    <span class="text-text-primary text-2xl font-semibold tabular-nums">€42k</span>
    <Sparkline area showEndPoint data={up} width={88} height={32} />
  </div>
</div>

In table rows

Sparklines line up in a column to make per-row trends scannable. Color each line to encode direction.

Account	Trend
Acme Corp
Globex
Initech

<table class="w-full max-w-md text-sm">
  <thead>
    <tr class="text-text-tertiary text-left text-xs">
      <th class="pb-2 font-medium">Account</th>
      <th class="pb-2 text-right font-medium">Trend</th>
    </tr>
  </thead>
  <tbody class="divide-border-hairline divide-y">
    {#each rows as row (row.name)}
      <tr>
        <td class="text-text-primary py-2">{row.name}</td>
        <td class="py-2 text-right">
          <Sparkline data={row.trend} color={row.color} width={96} height={22} />
        </td>
      </tr>
    {/each}
  </tbody>
</table>

Direction color

Pass color to signal up vs. down at a glance.

<Sparkline data={up} color="var(--color-success)" showEndPoint />
<Sparkline data={down} color="var(--color-danger)" showEndPoint />

02 Accessibility

Decorative by default

A sparkline usually accompanies a number that already conveys the value, so it is aria-hidden by default to avoid redundant screen-reader noise.

Opt-in labelling

When the trend is the only information present, pass ariaLabel — the sparkline then exposes role="img" with that label (e.g. "Revenue trending up over 7 days").

03 API Reference

13 props

13 props 1 required

Prop	Type	Default	Description
`data` required	`number[]`	—	Sequence of values plotted left → right.
`area`	`boolean`	`false`	Fill the area under the line.
`ariaLabel`	`string`	—	Accessible label; when omitted the sparkline is aria-hidden.
`class`	`string`	—	Extra classes merged onto the wrapper.
`color`	`string`	`'var(--color-chart-1)'`	Color property for the Sparkline component
`fluid`	`boolean`	`false`	Fill the container width instead of a fixed pixel size. Drops the svg's `width`/`height` attributes (they still set the `viewBox` aspect ratio) so it scales to its container; strokes stay crisp via `vector-effect="non-scaling-stroke"`.
`height`	`number`	`24`	Height property for the Sparkline component
`showEndPoint`	`boolean`	`false`	Mark the last point with a dot.
`slotClasses`	`SparklineSlotClasses`	—	Per-slot class overrides.
`strokeWidth`	`number`	`1.5`	StrokeWidth property for the Sparkline component
`unstyled`	`boolean`	—	Remove all default classes.
`width`	`number`	`96`	Width property for the Sparkline component
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

04 Types

Local type definitions used by this component.

2 types

Only referenced

	Name	Kind	Category	Used by	Description
	SparklineSlotClasses	type	helper	1	Per-slot class overrides for `SparklineProps`.
	SparklineProps	interface	props	0	—

05 Installation

Import

import { Sparkline } from '@urbicon-ui/blocks';

llm.txt