Sparkline #

A Sparkline renders a series of values as a small inline SVG line graph, designed for comparable small multiples.

import Sparkline from '@fuzdev/fuz_ui/Sparkline.svelte'; <Sparkline values={[3, 5, 2, 8, 6, 9, 4, 7, 5, 10, 8, 12]} />

With a shared max
#

By default each sparkline stretches its own max to full height. Pass a shared max so a set of sparklines renders at the same vertical scale and stays visually comparable:

<Sparkline values={a} max={12} />
<Sparkline values={b} max={12} />

Individually scaled (misleading — the second series peaks at 3):

Shared scale:

With a nonlinear scale
#

Under a large shared max, low-activity series hug the baseline. Set scale to compress the top of the range so small values stay legible — increasingly so from "sqrt" to a power exponent (a number in (0, 1], where 1 is linear) to "log". The alpha fade still tracks the linear ratio, so it keeps encoding true magnitude:

<Sparkline values={b} max={12} scale="sqrt" />
<Sparkline values={b} max={12} scale={1 / 3} />
<Sparkline values={b} max={12} scale="log" />

linear, sqrt, cube root, log

With custom color
#

The stroke uses currentColor, so set color on the component or a parent: (see the fuz_css colors docs)

<span class="color_b_50"><Sparkline values={a} /></span>

With alpha scaling
#

Each point's stroke alpha scales with its value, from alpha_floor at 0 (default 0.4) up to 1 at max, de-emphasizing quiet stretches. Set alpha_floor to 1 to disable the fade:

<Sparkline values={b} alpha_floor={1} />

default fade, no fade

With an end dot
#

Set end_dot to anchor the final point, marking the "now" end of the line:

<Sparkline values={a} end_dot />