Sparkline ^0.1.15

Tiny inline charts for cards, tables, and KPIs. Line, area, or bar variants with auto positive/negative coloring and optional reference line.

Line

<VxSparkline :data="[4,8,6,10,7,12,9,15,11,17,14,20]" :width="160" :height="40" />

Area

<VxSparkline :data="data" type="area" color="#22c55e" />

Bar

<VxSparkline :data="data" type="bar" color="#f59e0b" />

Auto color ^0.1.15

Color switches automatically based on trend direction (first vs last value).

Rising — green

Falling — red

<VxSparkline :data="trend" autoColor />
<VxSparkline :data="trend" type="bar" autoColor />

With pulsing end dot

<VxSparkline :data="data" showDot autoColor />

Reference line ^0.1.15

Show a baseline (target, zero, opening price).

Stock price

$125.00

+25% from open

<VxSparkline :data="prices" :reference="openPrice" type="area" autoColor showDot />

Inside stat cards

Revenue

$12,480

Churn

3.2%

Signups

482

Inside a table

Company	Trend (30d)	Change
Acme Corp		+12.4%
Globex Ltd		-4.1%
Soylent Inc		+2.3%
Initech		-8.7%

Bar with auto colors relative to reference

<VxSparkline :data="data" type="bar" autoColor :reference="50" />

Live updating

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { VxSparkline } from 'veloxui'

const live = ref([5, 8, 6, 10, 7, 12, 9, 15, 11, 17])
let t
onMounted(() => {
  t = setInterval(() => {
    const next = Math.max(2, Math.min(30, live.value.at(-1) + (Math.random() - 0.5) * 8))
    live.value = [...live.value.slice(1), Math.round(next)]
  }, 1200)
})
onBeforeUnmount(() => clearInterval(t))
</script>

<template>
  <VxSparkline :data="live" type="area" showDot />
</template>

API

Prop	Type	Default	Description
data	number[]	[]	Data series
type	'line' | 'area' | 'bar'	'line'	Visual variant
width	number	120	SVG width
height	number	36	SVG height
color	string	var(--primary)	Stroke / fill color
autoColor	boolean	false	Color by trend direction (up/down)
upColor	string	#22c55e	Color when rising
downColor	string	#ef4444	Color when falling
reference	number	—	Horizontal baseline value
strokeWidth	number	2	Line stroke thickness
smooth	boolean	true	Smooth curve
showDot	boolean	false	Pulsing dot on last value
showArea	boolean	true	Area fill under line (type='area')
gap	number	2	Gap between bars
animate	boolean	true	Animate on data change
animationDuration	number	700	Tween duration in ms
min / max	number	auto	Force value bounds