Live Sparkline
SVG sparkline that follows a series of values: the latest one is shown large, the line draws itself on first view and glides with each new data point.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Data has 28 effects, including 1 free. Explore the category →
3 usage examples
How it works
The data lives in the root's data-values attribute (comma-separated numbers, dot as decimal separator). The script keeps the last data-max-points values (20 by default) and draws three things inside <svg class="lsp-svg">: the area under the line (a gradient fading to transparent), the .lsp-line path and a .lsp-dot on the latest value. The vertical scale runs from the minimum to the maximum of the visible series.
Drawing happens in real pixels: the width is read from the SVG and a ResizeObserver redraws when the container is resized. The height comes from --lsp-height (80 px). The gradient id is generated per instance, so two sparklines never clash.
To add a point, rewrite data-values: a MutationObserver triggers a redraw. Line and area move to their new shape through a CSS transition on the d property (0.5 s), and the dot glides with cx / cy. The first time the chart scrolls into view, the line draws from left to right (stroke-dashoffset, 0.9 s), then the area and the dot fade in.
The number above the line is formatted by Intl.NumberFormat in the page language, with data-unit and data-decimals when needed ("132 bpm", "42%").
Accessibility
- A sentence instead of a drawing: the
.lsp-chartblock hasrole="img"and anaria-labelrebuilt on every update: name (data-label), latest value, minimum, maximum and number of points. The SVG and the large number arearia-hiddenso nothing is read twice. - No running commentary: the sparkline is not an
aria-liveregion, since a one-point-per-second feed would be read non-stop. If a value must be announced (threshold crossed), do it in a separate message. - Reduced motion: under
prefers-reduced-motion: reducethe line, area and dot are visible at once and change shape without any transition. - No controls: the component only displays, there is nothing to reach with the keyboard or to tap. New values come from your code, through
data-values.
Browser compatibility
SVG, MutationObserver, ResizeObserver, IntersectionObserver and Intl.NumberFormat. The glide relies on the CSS d property, which Safari does not support: there the line jumps straight to its new shape (measured in WebKit). Measured in Chromium 151, Firefox 153 and WebKit 26.5: two independent sparklines, reduced motion, 390 px, white background, no JS error.
Without JavaScript only the value written in the HTML shows and the SVG stays empty. Firefox before version 97 draws the line but makes it jump instead of glide.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0243-root" data-values="48,52,50,57,55,61,58,64,60,67,63,70" data-max-points="20" data-label="Visitors online">
<div class="lsp-chart">
<div class="lsp-value" aria-hidden="true">70</div>
<svg class="lsp-svg" aria-hidden="true" focusable="false"></svg>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
data-values (HTML, on the root) |
12 values from 48 to 70 | The series, with a dot as decimal separator. Rewriting the attribute redraws the line with a glide. |
data-max-points (HTML) |
20 | Number of values kept: the oldest ones leave on the left. |
data-unit, data-decimals (HTML) |
none, 0 | Unit appended to the displayed value (% follows the language rules) and number of decimals. |
data-label (HTML) |
"Visitors online" | Start of the sentence read by screen readers. |
--lsp-line, --lsp-fill, --lsp-dot, --lsp-value (CSS) |
#6366f1, #6366f1, #a78bfa, #a78bfa | Colours of the line, area, dot and number. |
--lsp-height and --lsp-max-width (CSS) |
80px, 480px | Chart height and maximum width; below that it follows its container. |
--lsp-speed (CSS) |
.5s | Duration of the glide between two shapes of the line. |
--lsp-bg and --lsp-min-height (CSS) |
#0a0a0f, 300px | Root background and minimum height; transparent and 0 inside a card. |
FAQ
root.setAttribute('data-values', previous + ',' + reading). No need to trim the list yourself, the script only keeps the last data-max-points values. One update per second or slower leaves time for the 0.5 s transition to play.d property of the SVG path. Chrome, Edge and Firefox (97+) support it, Safari does not and draws the new shape directly. The data shown is still correct, only the movement is missing.
