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

표시여부를 조절 (Controls visibility)

이름
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