How to Use the Vuetify Sparkline Component
We can use a sparkline to give a visual representation of numerical or statistical information with simple graphs. In this extensive guide, we'll learn how to use the Vuetify sparkline component to easily create and customize sparklines.
The Vuetify Sparkline Component (v-sparkline)
Vuetify provides the v-sparkline component for creating a sparkline. It has a value prop that takes an array containing the data to be represented:
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Stroke Line Cap
The sparkline has a sharp line cap by default. We can make it round by setting the stroke-linecap prop to round:
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
stroke-linecap="round"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Fill
We can color the region below the sparkline by setting the fill prop to true:
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
fill
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Line Width
We can use the line-width prop to control the thickness of the sparkline.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
line-width="2"
stroke-linecap="round"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Sparkline Color
v-sparkline comes with a color prop for customizing the color of the sparkline. We can use any color from the Material design specs.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
color="red accent-2"
stroke-linecap="round"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Smooth
With the smooth prop, we can set the roundness of the corners formed from the sparkline tracing the data points. We can pass a number or a boolean value to smooth. Setting it to true sets a corner radius of 8px. In the code example below, we set it to 5 (for a corner radius of 5px):
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="5"
stroke-linecap="round"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Setting smooth to false will set the corner radius to 0px:
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
:smooth="false"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Padding
We can add padding to the sparkline with the padding property. It has a padding of 8 by default.
<template>
<v-app>
<v-card class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
></v-sparkline>
</v-card>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Auto Draw
Setting the auto-draw prop to true on a v-sparkline will make the sparkline run a trace animation when first rendered.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
auto-draw
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Sparkline Auto Draw Duration
The auto-draw-duration prop allows us to set the duration of the trace animation in milliseconds. It has a default value of 2000 (2 seconds).
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
auto-draw
:auto-draw-duration="4000"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Sparkline Auto Draw Easing
We can specify the easing function of the trace animation with the auto-draw-easing prop:
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
auto-draw
:auto-draw-duration="4000"
auto-draw-easing="linear"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Type
By setting the type prop to bar, we can make v-sparkline show a set of bars instead of a line. The default type is trend which shows the continuous line.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
type="bar"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
}),
};
</script>
Vuetify Sparkline Gradient
We can set the color of the sparkline to a linear gradient with the gradient prop. gradient takes an array of colors to use for the linear gradient.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
:gradient="gradient"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
gradient: ['red', 'orange', 'yellow'],
}),
};
</script>
Vuetify Sparkline Gradient Direction
The gradient-direction property of v-sparkline sets the direction in which the color gradient should run.
<template>
<v-app>
<div class="ma-4">
<v-sparkline
:value="value"
smooth="10"
padding="10"
stroke-linecap="round"
:gradient="gradient"
gradient-direction="bottom"
></v-sparkline>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
gradient: ['red', 'orange', 'yellow'],
}),
};
</script>
Conclusion
A sparkline displays simple graphs that visually represent numerical or statistical information. We can use the Vuetify sparkline component (v-sparkline) and its various prop to create and customize sparklines.
