Line Chart ^0.1.15

A lightweight, animated SVG line chart. Single or multi-series, optional area fill, smooth curves, step mode, reference lines, value labels, gradient strokes, hover tooltip, live updates — no external chart library.

Basic

<script setup>
import { VxLineChart } from 'veloxui'

const data = [12, 19, 14, 24, 30, 22, 35, 40, 38, 52, 48, 60]
const labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
</script>

<template>
  <VxLineChart :data="data" :labels="labels" :height="260" />
</template>

Multi-series with legend

Revenue

Costs

Profit

<VxLineChart :data="multiSeries" :labels="labels" legend />

Smooth vs Straight vs Step

Smooth

Straight

Step

<VxLineChart :data="data" :labels="labels" />                  <!-- smooth -->
<VxLineChart :data="data" :labels="labels" :smooth="false" />  <!-- straight -->
<VxLineChart :data="data" :labels="labels" step />             <!-- step -->

Reference lines ^0.1.15

Annotate thresholds, targets, or averages with horizontal reference lines.

<VxLineChart
  :data="data"
  :labels="labels"
  :references="[
    { value: 50, label: 'Target',  color: '#22c55e' },
    { value: 20, label: 'Minimum', color: '#ef4444' },
  ]"
/>

Value labels ^0.1.15

Show the actual numeric value above each point.

<VxLineChart :data="data" :labels="labels" valueLabels dots color="#22c55e" />

Gradient stroke ^0.1.15

<VxLineChart :data="data" :labels="labels" gradient :stroke-width="3" color="#a855f7" />

Dashed line ^0.1.15

Useful for forecasts or projected ranges.

<VxLineChart :data="forecast" :labels="labels" dashed :area="false" />

Comparison: Current vs Prior period

2025

2024

<VxLineChart
  :data="[
    { name: '2025', data: currentYear },
    { name: '2024', data: priorYear },
  ]"
  :labels="labels"
  :colors="['#6366f1', '#94a3b8']"
  legend
/>

With dots

<VxLineChart :data="data" :labels="labels" dots />

No area fill

<VxLineChart :data="data" :labels="labels" :area="false" dots />

Negative values

<VxLineChart
  :data="[-8, -2, 4, 10, 6, -4, -12, -6, 2, 14, 20, 16]"
  :labels="labels"
  color="#ef4444"
  :references="[{ value: 0, label: 'Break-even' }]"
/>

Large dataset (60 points)

<VxLineChart :data="bigDataset" :stroke-width="1.8" color="#06b6d4" />

Sparkline mode

No grid, no axes, no tooltip — just a tiny trend line. Great inside cards and tables.

Visitors

12,480

<VxLineChart
  :data="sparklineData"
  :height="50"
  :grid="false"
  :axis="false"
  :tooltip="false"
  color="#22c55e"
/>

Dashboard card with target

Monthly conversions

6.0%

▲ 0.3% vs target

ON TRACK

Interactive — Single color

#6366f1

#6366f1

Interactive — Multi-series palette

#6366f1

Revenue

#22c55e

Costs

#f59e0b

Profit

Revenue

Costs

Profit

Live / reactive

The chart smoothly tweens between states when the data prop changes.

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

const live = ref([20, 24, 18, 30, 28, 35, 40])
let t
onMounted(() => {
  t = setInterval(() => {
    const next = Math.max(5, Math.min(80, live.value.at(-1) + (Math.random() - 0.5) * 20))
    live.value = [...live.value.slice(1), Math.round(next)]
  }, 1500)
})
onBeforeUnmount(() => clearInterval(t))
</script>

API

VxLineChart Props

Prop	Type	Default	Description
data	number[] | LineChartPoint[] | LineChartSeries[]	[]	Single or multi-series data
labels	(string|number)[]	[]	X-axis labels
height	number	240	Chart height
smooth	boolean	true	Smooth cubic bezier curves
step	boolean	false	Step-line mode
dashed	boolean	false	Dashed stroke (e.g. forecasts)
gradient	boolean	false	Horizontal gradient stroke
area	boolean	true	Gradient area fill
dots	boolean	false	Dot at each point
valueLabels	boolean	false	Show value text above each point
references	LineChartReference[]	[]	Horizontal threshold lines { value, label?, color?, dashed? }
color	string	—	Single-series color
colors	string[]	—	Multi-series palette
strokeWidth	number	2	Line thickness
grid	boolean	true	Horizontal grid
axis	boolean	true	Axis labels
tooltip	boolean	true	Hover tooltip
legend	boolean	false	Legend below chart
animate	boolean	true	Animate on mount and data change
animationDuration	number	900	Tween duration in ms
min / max	number	auto	Force y-axis bounds
yTicks	number	4	Horizontal grid / tick count
formatValue	(v) => string	abbreviates 1.2k	Value formatter

Events

Event	Payload
hover	{ seriesIndex, pointIndex, value }
click	{ seriesIndex, pointIndex, value }