Sparklines.js Beautiful and Simple Inline Charts

Interactive Playground

Chart Type

Line<br>Bar<br>Pie<br>Tristate<br>Discrete<br>Bullet<br>Box

Data (comma-separated)

Line/Bar Color

Fill Color

Show Spots

Show Fill

Generate

Live Preview

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

Line Charts

Basic

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

Filled with Spots

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

Normal Range

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

Bar Charts

Basic

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

With Negative Values

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

Stacked

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

Tristate Charts

Win/Loss/Draw

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

Discrete Charts

With Threshold

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

Bullet Charts

Performance Target

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

Pie Charts

Proportions

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

Box Charts

Statistical Data

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

Interactive Tooltip

Hover for Details

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