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.

Применение

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
Имя
auto-draw
По умолчанию
false
Тип
boolean

Components.Sparklines.

Имя
auto-draw-duration
По умолчанию
2000
Тип
number

Components.Sparklines.

Имя
auto-draw-easing
По умолчанию
'ease'
Тип
string

Components.Sparklines.

Имя
auto-line-width
По умолчанию
false
Тип
boolean

Components.Sparklines.

Имя
color
По умолчанию
'primary'
Тип
string

Применяет заданный цвет к элементу управления

Имя
fill
По умолчанию
false
Тип
boolean

Components.Sparklines.

Имя
gradient
По умолчанию
[]
Тип
array

Components.Sparklines.

Имя
gradient-direction
По умолчанию
'top'
Тип
string

Components.Sparklines.

Имя
height
По умолчанию
75
Тип
string | number

Установка высоты компонента

Имя
label-size
По умолчанию
7
Тип
number | string

Components.Sparklines.

Имя
labels
По умолчанию
[]
Тип
array

Components.Sparklines.

Имя
line-width
По умолчанию
4
Тип
string | number

Components.Sparklines.

Имя
padding
По умолчанию
8
Тип
string | number

Components.Sparklines.

Имя
show-labels
По умолчанию
false
Тип
boolean

Components.Sparklines.

Имя
smooth
По умолчанию
false
Тип
boolean | number | string

Components.Sparklines.

Имя
type
По умолчанию
'trend'
Тип
string

Components.Sparklines.

Имя
value
По умолчанию
[]
Тип
array

Контроль видимости

Имя
width
По умолчанию
300
Тип
number | string

Ширина содержимого

Примеры

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