Kaiadmin Bootstrap 5 Admin Dashboard

jQuery Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Please checkout their Full Documentation.

Table of Contents

Examples

Examples

Line Charts

            
              <div id="lineChart"></div>

            
              $('#lineChart').sparkline([102,109,120,99,110,80,87,74,102,109,120,99,110,80,87,74], {
type: 'line',
height: '100',
width: '250',
lineWidth: '2',
lineColor: '#177dff',
fillColor: 'rgba(23, 125, 255, 0.2)'
});

Bar Charts

            
              <div id="barChart"></div>

            
              $('#barChart').sparkline([102,109,120,99,110,80,87,74,102,109,120,99,110,80,87,74], {
type: 'bar',
height: '100',
barWidth: 9,
barSpacing: 10,
barColor: '#177dff'
});

Tristate Charts

            
              <div id="sparktristateChart"></div>

            
              $('#sparktristateChart').sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1], {
type: 'tristate',
posBarColor: '#35cd3a',
negBarColor: '#f3545d',
height: '100',
barWidth: 9,
barSpacing: 10,
});

Discrete Charts

            
              <div id="discreteChart"></div>

            
              $('#discreteChart').sparkline([4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5], {
type: 'discrete',
lineColor: '#177dff', 
thresholdColor: '#f3545d', 
thresholdValue: 4,
height: '100',
width: '150',
});

Pie Charts

            
              <div id="pieChart"></div>

            
              $('#pieChart').sparkline([20,50,30], {
type: 'pie',
height: '100',
});

Components