`<dj-sparkline>`

A tiny inline chart of one numeric series, with no axes, grid, legend, tooltip, or margins.

data is a plain array of numbers. For a full chart with axes and interaction, use <dj-chart>: the sparkline shares its math but is a separate, much smaller component.

Try it in the playground

@dojo-ng/chart · v0.2.1 · The same package also registers <dj-chart>.

npm install @dojo-ng/chart

import "@dojo-ng/chart";

Live data

push() appends one or more values without rebuilding data, for cheap live updates. max-points limits how many values it keeps.

Accessibility

With a label, the sparkline has role="img", that name, and a generated summary ("N points, min X, max Y, last Z") in the page's locale.
Without a label it is aria-hidden. That is the common case, when text next to it already states the value, as in a row of key figures with a trend beside each number.

Properties

Property	Attribute	Type	Default
`data`	Property only	`number[]`	`[]`
`type`Mark type. `line`/`area` share one path; `bar` renders one rect per point.	`type` reflected	`"line""area""bar"`	`"line"`
`label`Accessible name; when unset the sparkline is `aria-hidden` (see the class doc).	`label`	`string`	None
`marker`Show a dot at the last point. Ignored for `type="bar"`.	`marker` reflected	`boolean`	`false`
`min`Fixed domain minimum; defaults to the data's own minimum.	`min`	`number`	None
`max`Fixed domain maximum; defaults to the data's own maximum.	`max`	`number`	None
`maxPoints`Cap on `data` values kept after `push` appends; 0 (default) is unbounded. Old values are trimmed from the front, so the sparkline shows a sliding window.	`max-points`	`number`	`0`

CSS parts

Style these with dj-sparkline::part(name).

basemarker

CSS custom properties

Property	Default	Description
`--dj-sparkline-width`	`8em`	Host width.
`--dj-sparkline-height`	`1.5em`	Host height.
`--dj-sparkline-color`	None	Line/area/bar color; defaults to dj-chart's series-1 token (`--dj-chart-1`, #2563eb).
`--dj-sparkline-marker-size`	`0.25em`	Diameter of the last-point marker dot.

Methods

Method	Description
`push(value: number \| number[])`	Append one or more values without rebuilding `data` yourself. Multiple calls within the same animation frame coalesce into a single `data` assignment. Trims from the front to `max-points` when set. Sparklines have no transitions, so nothing else changes on append.