Sparkline
Key figure with its change and a mini line that draws itself underneath as it comes into view, green with an up arrow or red with a down arrow.
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 series goes into data-values on the .fx-0232-root root. If .sprk-value is empty, the script writes the last value into it; if .sprk-delta is empty, it writes the change between the first and last values as a signed percentage (“+12.5%”). Both go through Intl.NumberFormat in the page language, with data-currency for an amount (“$4,832”, “4 832 €”), data-unit for a unit and data-decimals for decimals. Text you write yourself in those two elements is kept as is.
The direction comes from the data: if the last value is lower than the first, the root gets the sprk-down class, which switches the colour to --sprk-down (red) and flips the arrow; otherwise everything stays --sprk-up (green). data-trend="up" or "down" forces it. The line is an SVG built at the real size of .sprk-chart (height --sprk-height), from the smallest to the largest value, with a dot on the last one; a ResizeObserver recomputes it when the width changes.
When 35% of the line is visible, the sprk-on class draws it from left to right in 1.5 s (ease-out), fades the area in over 1 s from 0.5 s, then lights the end dot at 1.5 s. Only once.
Accessibility
- The figure and the change are real text, read in order (“$4,832 +12.5%”); the arrow is decorative and hidden, the sign of the percentage carries the direction.
- The line has an equivalent:
.sprk-charthasrole="img"and anaria-labelmade ofdata-titlefollowed by the values in the page format. - Reduced motion: under
prefers-reduced-motion: reduce, the line, the area and the dot show straight away. - Colour is backed up: green and red never stand alone, the arrow and the sign also say whether it goes up or down. No interaction: nothing takes focus.
Browser compatibility
SVG built in JavaScript, CSS animations on stroke-dashoffset and opacity, IntersectionObserver, ResizeObserver and Intl.NumberFormat with signDisplay. Measured on 8 Nov 2026 in Chromium 151, Firefox 153 and WebKit 26.5 (Playwright): two independent copies, reduced motion, 390 px wide, no errors.
Without IntersectionObserver, the line draws on load. Without JavaScript the card only shows the arrow: write the value and the change straight into the HTML in that case.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0232-root" data-currency="USD" data-title="Revenue over the last nine weeks" data-values="4295,4380,4330,4520,4470,4690,4610,4760,4832">
<div class="sprk-box">
<div class="sprk-header">
<span class="sprk-value"></span>
<span class="sprk-change">
<svg class="sprk-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 19V5M5 12l7-7 7 7"></path>
</svg>
<span class="sprk-delta"></span>
</span>
</div>
<div class="sprk-chart" role="img"></div>
</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 |
|---|---|---|
Series (HTML — data-values on the root) |
4295,4380,4330,4520,4470,4690,4610,4760,4832 | At least two comma-separated numbers, decimal point. |
Format (HTML — data-currency, data-unit, data-decimals) |
USD (EN page), EUR (FR page); 0 decimals for a currency, 1 otherwise |
ISO currency or free unit for the value; 0 to 4 decimals. |
Value and change (HTML — text of .sprk-value and .sprk-delta) |
Empty: computed from the series | Write your own text to show it instead (e.g. “+€1,260 this week”). |
Direction (HTML — data-trend="up" or "down") |
Inferred: down if the last value is below the first | Forces the colour and the arrow direction. |
Spoken description (HTML — data-title) |
“Revenue over the last nine weeks” | Start of the line's aria-label, followed by the values. |
Colours (CSS — --sprk-up, --sprk-down, --sprk-text) |
#22c55e, #ef4444, #fff | Colour when rising, when falling, and colour of the figure. |
Sizes and background (CSS — --sprk-height, --sprk-value-size, --sprk-max-width, --sprk-min-height, --sprk-bg) |
40 px, 1.5rem, 280 px, 300 px, #0a0a0f | Line height, figure size, maximum block width, minimum root height, background. |
FAQ
--sprk-up and --sprk-down. The arrow always follows the real direction of the data, only the meaning of the colour changes.data-values, divided by the first: from 4,295 to 4,832, “+12.5%”. For another comparison (previous week, a target), write your text in .sprk-delta.--sprk-min-height: 0 and --sprk-max-width: none, then lay .sprk-box out in a row if you want the figure next to the line.
