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 sparkline component comes in 2 variations, trend(default) and bar. Each support a multitude of options for customizing the look and feel of the sparkline.

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
auto-line-width
Default
false
Type
boolean

Automatically expand bars to use space eficiently

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
fill
Default
false
Type
boolean

Using the fill property allows you to better customize the look and feel of your sparkline.

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
label-size
Default
7
Type
number | string

The label font size

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
type
Default
'trend'
Type
string

Choose between a trendline or bars

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.

Fill

You can create a v-sparkline with fill using the fill property.

Edit this page | language on Github