Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Components
  3. Sparkline

Sparkline

The <velin-sparkline> Web Component renders a tiny inline-SVG trend chart from a CSV value array, animates the stroke draw-in, and exposes a live update() API for tick-driven dashboards.

Basic

<velin-sparkline
  values="3,5,4,7,6,8,7,11,9,12"
  area glow
  animate="draw"
  label="Weekly users"></velin-sparkline>

Attributes

AttributeTypeNotes
valuesCSV / JSON arrayRequired; numeric data points
width / heightnumberSVG viewBox; defaults 320 × 96
min / maxnumberClamp range; default derived from values
areabooleanAdds gradient area fill below the line
glowbooleanLoops velin-sparkline-glow on the SVG
animatedraw | noneDefault draw — once on connect
labelstringSets role="img" + aria-label

JavaScript API

const spark = document.querySelector('velin-sparkline');
spark.update([3, 5, 4, 7, 9, 12, 14]);  // morphs path + triggers value-bump
spark.values; // current values getter
spark.values = [1, 2, 3]; // setter (reflects to attribute)

Live tick

setInterval(() => {
  const last = spark.values.at(-1);
  const next = last + (Math.random() - 0.5) * 4;
  spark.update([...spark.values.slice(1), next]);
}, 4000);

Accessibility