Sparkline

The sparkline component can be used to create simple graphs, like GitHub's contribution chart.

Any SVG attribute may be used in addition to the ones listed below.

Usage

The v-sparkline component is the bridge between having a chart and not. It is a rich and lightweight pseudo chart that excels in displaying numerical data.

API

v-sparkline
Name
auto-draw
Default
false
Type
boolean

Trace the length of the line when first rendered

Name
auto-draw-duration
Default
2000
Type
number

Amount of time (in ms) to run the trace animation

Name
auto-draw-easing
Default
'ease'
Type
string

The easing function to use for the trace animation

Name
color
Default
'primary'
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
gradient
Default
[]
Type
array

An array of colors to use as a linear-gradient

Name
gradient-direction
Default
'top'
Type
string

The direction the gradient should run

Name
height
Default
75
Type
string | number

Sets the component height

Name
labels
Default
[]
Type
array

An array of string labels that correspond to the same index as its data counterpart

Name
line-width
Default
4
Type
string | number

The thickness of the line, in px

Name
padding
Default
8
Type
string | number

Low smooth or high line-width values may result in cropping, increase padding to compensate

Name
show-labels
Default
false
Type
boolean

Show labels below each data point

Name
smooth
Default
false
Type
boolean | number | string

Number of px to use as a corner radius. true defaults to 8, false is 0

Name
value
Default
[]
Type
array

Controls visibility

Name
width
Default
300
Type
number | string

The width of the content

Examples

Take a break

For concise information, a complete chart might be overkill. Using a trend line with gradient provides enough detail for the user without showing too much information.

Dashboard card

The v-sparkline component pairs nicely with v-card and v-sheet to create customized information cards, perfect for admin dashboards. Here we use custom labels to provide additional context for the sparkline.

Custom labels

By providing a scoped slot label, we are able to modify the displayed content adding a dollar sign ($). This slot is exclusively for text content. For more information on the svg <text> element, navigate here.

Edit this page | language on Github