Stock Price:
+2.4%
Sales:
↗️ Trending Up
Performance:
85% Good
📊 Line Charts
Basic Line Chart
Simple line chart
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line" />
Line with Fill Area
Line chart with fill color
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:fillColor="'#c0d0f0'" />
Line with Spots
Line chart with min/max spots (hover for enhanced tooltips)
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:spotColor="'#f08000'" :minSpotColor="'#f08000'"
:maxSpotColor="'#f08000'" />
Normal Range
Line with normal range highlighting (hover for range status tooltips)
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="line"
:normalRangeMin="4" :normalRangeMax="8"
:normalRangeColor="'#c0c0c0'" />
� Multi-Series Line Charts
Two Series - Default Colors
Actual vs Target (hover to see all series)
<Sparkline :data="[[10,15,20,18,25,30],[15,18,22,20,26,28]]"
type="line" :options="{seriesNames: ['Actual','Target']}" />
Three Series - Custom Colors
Multi-region comparison (hover for synchronized highlight)
<Sparkline :data="[[5,8,12,15,18],[10,12,15,18,20],[8,10,14,16,19]]"
type="line" :options="{
seriesNames: ['North','South','West'],
lineColor: ['#e74c3c','#3498db','#2ecc71']
}" />
Variable Line Widths
Emphasize key series (hover for tooltip)
<Sparkline :data="[[100,105,110,108,115],[95,98,102,100,106]]"
type="line" :options="{
seriesNames: ['Primary','Secondary'],
lineWidth: [3,1],
spotRadius: [0,0]
}" />
With Gaps (Nulls)
Incomplete data series
<Sparkline :data="[[10,15,null,25,30],[12,null,20,28,null]]"
type="line" :options="{seriesNames: ['Dataset A','Dataset B']}" />
�📊 Bar Charts
Basic Bar Chart
Simple bar chart
<Sparkline :data="[5,6,7,9,9,5,3,2,2,4,6,7]" type="bar" />
Bar Chart with Negative Values
Bars with positive and negative values
<Sparkline :data="[2,-3,4,-1,3,-2,1,-4]" type="bar"
:negBarColor="'#ff6b6b'" />
Stacked Bar Chart
Stacked bars (hover for multi-value tooltips with colors)
<Sparkline :data="[[2,3,4],[3,2,4],[4,3,2]]" type="bar"
:stackedBarColor="['#667eea','#764ba2','#f093fb']" />
Colored Bars
Bars with custom colors
<Sparkline :data="[5,6,7,9,9,5,3,2]" type="bar"
:colorMap="{'5':'#ff9999','9':'#99ff99'}" />
🥧 Pie Charts
Basic Pie Chart
Simple pie chart
<Sparkline :data="[1,1,2]" type="pie" />
Custom Colors
Pie with custom slice colors
<Sparkline :data="[1,1,2,3]" type="pie"
:sliceColors="['#667eea','#764ba2','#f093fb','#ffeaa7']" />
🎯 Other Chart Types
Discrete Chart
Discrete value chart
<Sparkline :data="[4,6,7,7,4,3,2,1,4,5,7,9]" type="discrete" />
Tristate Chart
Win/Loss/Draw chart (hover for summary with colors)
<Sparkline :data="[1,1,-1,1,-1,0,1,-1]" type="tristate" />
Bullet Chart
Performance vs target
<Sparkline :data="[10,12,12,9,7]" type="bullet" />
Box Plot
Statistical box plot (hover for detailed stats with visual feedback)
<Sparkline :data="[4,27,34,52,54,59,61,68,78,82,85,87,91,93,100]"
type="box" />