VSparkline API

Props

name	type	default
`auto-draw`	boolean	false
Trace the length of the line when first rendered.
`auto-draw-duration`	string \| number	undefined
Amount of time (in ms) to run the trace animation.
`auto-draw-easing`	string	'ease'
The easing function to use for the trace animation.
`auto-line-width`	boolean	false
Automatically expand bars to use space efficiently.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`fill`	boolean	false
Using the fill property allows you to better customize the look and feel of your sparkline.
`gradient`	string[]	[]
An array of colors to use as a linear-gradient.
`gradient-direction`	'top' \| 'bottom' \| 'left' \| 'right'	'top'
The direction the gradient should run.
`height`	string \| number	75
Height of the SVG trendline or bars.
`id`	string	undefined
The id of the component.
`item-value`	string	'value'
The value of the item.
`labels`	(string \| number \| { value: number })[]	[]
An array of string labels that correspond to the same index as its data counterpart.
`label-size`	string \| number	7
The label font size.
`line-width`	string \| number	4
The thickness of the line, in px.
`max`	string \| number	undefined
The maximum value of the sparkline.
`min`	string \| number	undefined
The minimum value of the sparkline.
`model-value`	(string \| number \| { value: number })[]	[]
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`padding`	string \| number	8
Low `smooth` or high `line-width` values may result in cropping, increase padding to compensate.
`show-labels`	boolean	false
Show labels below each data point.
`smooth`	string \| number \| boolean	false
Number of px to use as a corner radius. `true` defaults to 8, `false` is 0.
`type`	'bar' \| 'trend'	'trend'
Choose between a trendline or bars.
`width`	string \| number	300
Width of the SVG trendline or bars.

Slots

never

{ index: number; value: string }

`default`
The default Vue slot.
`label`
The default slot of the v-label or v-field-label component.

#VSparkline API

VSparkline API