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']
});