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.
v-sparkline component is the bridge between having a chart and not. It is a rich and lightweight pseudo chart that excels in displaying numerical data.
Trace the length of the line when first rendered
Amount of time (in ms) to run the trace animation
The easing function to use for the trace animation
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
rgba(255, 0, 0, 0.5))
An array of colors to use as a linear-gradient
The direction the gradient should run
Sets the component height
An array of string labels that correspond to the same index as its data counterpart
The thickness of the line, in px
smooth or high
line-width values may result in cropping, increase padding to compensate
Show labels below each data point
Number of px to use as a corner radius.
true defaults to 8,
false is 0
The width of the content
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.
v-sparkline component pairs nicely with
v-sheet to create customized information cards, perfect for admin dashboards. Here we use custom labels to provide additional context for the sparkline.
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.