Getting Started
These basic examples show you the fundamental usage patterns for Sparkline Vue. Perfect for beginners who want to understand the core concepts and get up and running quickly.
📈 Line Charts
Simple Line Chart
The most basic line chart with default styling. Perfect for showing trends in your data.
Stock Prices Over Time
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line" />
Line Chart with Fill
Add a fill color underneath the line to create an area chart effect.
Revenue Growth
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:fillColor="'rgba(102,126,234,0.2)'" />
Line with Spots
Highlight specific data points with colored spots for better visibility.
Daily Temperature
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:spotColor="'#f39c12'" :lineColor="'#e74c3c'" />
Multi-color Line
Customize colors for different elements: line, fill, and spot colors.
Performance Metrics
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:lineColor="'#9b59b6'" :fillColor="'rgba(155,89,182,0.1)'"
:spotColor="'#e67e22'" />
📊 Bar Charts
Simple Bar Chart
Basic bar chart perfect for comparing discrete values across categories.
Monthly Sales
<Sparkline :data="[10,15,8,20,12,25,18,22]" type="bar" />
Positive/Negative Bars
Show gains and losses with different colors for positive and negative values.
Profit/Loss by Quarter
<Sparkline :data="[5,-3,8,-2,10,-5,7]" type="bar"
:barColor="'#27ae60'" :negBarColor="'#e74c3c'" />
Custom Bar Colors
Apply different colors to individual bars based on their values or conditions.
Status Indicators
<Sparkline :data="[10,15,8,20,12,25]" type="bar"
:barColor="'#3498db'" />
Zero Line Reference
Display a zero line to provide context for positive and negative values.
Budget Variance
<Sparkline :data="[2,-1,3,0,4,-2,1]" type="bar"
:zeroAxis="true" :barColor="'#16a085'" :negBarColor="'#c0392b'" />
🎯 Other Chart Types
Pie Chart
Show proportional data with a simple pie chart representation.
Market Share
<Sparkline :data="[20,35,40,10]" type="pie" />
Discrete Chart
Display categorical data as vertical lines of varying heights.
Activity Levels
<Sparkline :data="[4,6,7,7,4,3,2,1,4,5,6,7]" type="discrete" />
Tristate Chart
Perfect for showing win/loss/draw scenarios or up/down/unchanged states.
Game Results
<Sparkline :data="[1,1,-1,1,-1,0,1,-1]" type="tristate" />
Bullet Chart
Compare performance against targets with this compact bullet chart format.
Sales Target Progress
<Sparkline :data="[35,25,18,40,50]" type="bullet" />
✨ Why Choose Sparkline Vue?
Sparkline Vue makes it incredibly easy to add beautiful, interactive charts to your Vue.js applications with minimal configuration.
Lightweight
Minimal bundle size with maximum impact
Customizable
Extensive styling options and themes
Responsive
Works perfectly on all device sizes
Easy to Use
Simple API with Vue.js integration