Sparklines
The sparkline component can be used to create simple graphs, like GitHub’s contribution chart.
Usage
A sparkline is a tiny chart that provides a visual representation of data. The sparkline component comes in 2 variations, trend (default) and bar. Each supports a multitude of options for customizing the look and feel of the sparkline.
API
| Component | Description |
|---|---|
| v-sparkline | Primary Component |
Examples
Props
Fill
You can create a v-sparkline with fill using the fill property.
Misc
Custom labels
By providing a label slot, we are able to modify the displayed content by adding a dollar sign ($). This slot is exclusively for text content. For more information on the svg <text> element, navigate here.
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.
last registration 26 minutes ago
Heart rate
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.