# Sparklines
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
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
# 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.
# 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.