Sparklines.js Examples

Download Back To CSSScript.Com

Build inline line, bar, tristate, discrete, bullet, pie, and box charts with Sparklines.js. Vanilla JavaScript sparkline library with flexible data input and customization.

Interactive Playground

Live Preview

5,8,3,9,2,7,4,6

Line Charts

Basic

1,4,6,6,8,5,3,5 
sparklines('#line1', ...);

Filled with Spots

2,4,3,1,5,4,6,8 
sparklines('#line2', ..., { options });

Normal Range

3,7,2,9,1,4,6,8,2,5 
sparklines('#line3', ..., { options });

Bar Charts

Basic

3,6,2,8,4,7,1,9 
sparklines('#bar1', ..., { type: 'bar' });

With Negative Values

5,-2,3,-1,4,-3,2,-4 
sparklines('#bar2', ..., { options });

Stacked

2:3:1,1:2:2,3:1:1,2:2:3 
sparklines('#bar3', ..., { options });

Tristate Charts

Win/Loss/Draw

1,1,-1,1,0,0,-1,1,-1,0 
sparklines('#tristate1', ..., { type: 'tristate' });

Discrete Charts

With Threshold

1,3,4,5,5,3,4,5,2,6 
sparklines('#discrete1', ..., { type: 'discrete' });

Bullet Charts

Performance Target

10,12,12,9,7 
sparklines('#bullet1', ..., { type: 'bullet' });

Pie Charts

Proportions

3,2,4,1 
sparklines('#pie1', ..., { type: 'pie' });

Box Charts

Statistical Data

4,27,34,52,54,59,61,68,78,82,85,87,91,93,100 
sparklines('#box1', ..., { type: 'box' });

Interactive Tooltip

Hover for Details

5,8,3,9,2,7,4,6,8,1 
sparklines('#interactive1', ..., { options });