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'" />
📊 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" />