Sparkline.svelte

Renders values as a small inline SVG line graph.

Designed for comparable small multiples: pass a shared max so a set of sparklines renders at the same vertical scale instead of each stretching to fit. The stroke uses currentColor, so color it by setting color on the component or a parent (e.g. a fuz_css color_* class). Each point's stroke alpha scales with its value, from alpha_floor at 0 up to 1 at max, de-emphasizing quiet stretches.

scale controls only the geometry: the nonlinear options compress the top of the range so small values stay legible under a large shared max, while the alpha fade keeps tracking the linear ratio so it still encodes true magnitude.

The background is a light wash of currentColor, overridable with the --sparkline_bg custom property.

view source

Declarations
#

Sparkline
#

Sparkline.svelte view source

accepts children

import Sparkline from '@fuzdev/fuz_ui/Sparkline.svelte';

values

type number[]

max?

The value rendered at full height and full alpha. Pass a shared max across sparklines for comparable scales. Defaults to the local max of values.

type number
optional

scale?

Vertical scale for the line's geometry — see SparklineScale. The alpha fade always tracks the linear ratio regardless of scale.

type SparklineScale
optional default 'linear'

width?

Width of the svg in px.

type number
optional default 100

height?

Height of the svg in px.

type number
optional default 24

stroke_width?

type number
optional default 2

alpha_floor?

Stroke alpha at a value of 0, scaling linearly to 1 at max.

type number
optional default 0.4

end_dot?

Renders a dot at the final point, anchoring the "now" end of the line.

type boolean
optional default false

label?

Accessible label. When omitted the svg is aria-hidden.

type string
optional

external types

OmitStrict<SvelteHTMLElements['svg'], 'values' | 'width' | 'height' | 'scale'>

Depends on
#

Imported by
#