Store

For Enterprise

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.

A sparkline is a tiny chart that provides a visual representation of data.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

You can create a v-sparkline with fill using the fill property.

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.

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.

By providing a label slot, 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.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!