Line Chart

An example of a simple line chart with one series.

HTML Code

<span id="sparkline1">1,4,4,7,5,9,10,1,4,4,7,5,9,10</span>

Javascript Code

$('#sparkline1').sparkline('html', { width: '100%', height: 70, lineColor: '#0083CD', fillColor: false });

Area Chart

An example of a simple line chart with one series.

Option Code

lineColor: '#0083CD', fillColor: 'rgba(0,131,205,0.2)'

Bar Chart

An example of a simple bar chart with one series.

Source Code

$('#sparkline5').sparkline('html', { type: 'bar', barWidth: 10, height: 70, barColor: '#0083CD', chartRangeMax: 12 });

Stacked Bar Chart

An example of a stacked bar chart with two series.

Source Code

$('#sparkline7').sparkline('html', { type: 'bar', barWidth: 10, height: 70, barColor: '#0083CD', chartRangeMax: 12 }); $('#sparkline7').sparkline([4,5,6,7,4,5,8,7,6,6,4,7,6,4,7], { composite: true, type: 'bar', barWidth: 10, height: 70, barColor: '#11546F', chartRangeMax: 12 });

Pie Chart

An example of a pie chart with two series.

Source Code

$('#sparkline9').sparkline('html', { type: 'pie', height: 70, sliceColors: ['#F4C62B', '#F6931E', '#8CC63E'] });