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
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
컨트롤에 색상을 지정
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
컴포넌트의 높이를 설정
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
Components.Sparklines.
표시여부를 조절 (Controls visibility)
컨텐츠의 폭을 설정
예제
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.