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

props
v-sparkline
Name
auto-draw
Default
false
Type
boolean

Components.Sparklines.

Name
auto-draw-duration
Default
2000
Type
number

Components.Sparklines.

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

Components.Sparklines.

Name
auto-line-width
Default
false
Type
boolean

Components.Sparklines.

Name
color
Default
'primary'
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
fill
Default
false
Type
boolean

Components.Sparklines.

Name
gradient
Default
[]
Type
array

Components.Sparklines.

Name
gradient-direction
Default
'top'
Type
string

Components.Sparklines.

Name
height
Default
75
Type
string | number

Components.Sparklines.

Name
label-size
Default
7
Type
number | string

Components.Sparklines.

Name
labels
Default
[]
Type
array

Components.Sparklines.

Name
line-width
Default
4
Type
string | number

Components.Sparklines.

Name
padding
Default
8
Type
string | number

Components.Sparklines.

Name
show-labels
Default
false
Type
boolean

Components.Sparklines.

Name
smooth
Default
false
Type
boolean | number | string

Components.Sparklines.

Name
type
Default
'trend'
Type
string

Components.Sparklines.

Name
value
Default
[]
Type
array

Components.Sparklines.

Name
width
Default
300
Type
number | string

Components.Sparklines.

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
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore