Katniss Responsive Bootstrap 4 Admin Template

Sparkline Charts

Line Chart

A line chart or line graph is a type of chart which displays information as a series of data points called markers.

1,4,4,7,5,9,10,1,4,4,7,5,9,10

Line Chart

A line chart or line graph is a type of chart which displays information as a series of data points called markers.

1,4,4,7,5,9,10,1,4,4,7,5,9,10

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 area chart or area graph displays graphically quantitative data. It is based on the line chart.

1,4,4,7,5,9,10,1,4,4,7,5,9,10

Area Chart

An area chart or area graph displays graphically quantitative data. It is based on the line chart.

1,4,4,7,5,9,10,1,4,4,7,5,9,10

Option Code

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

Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

3,4,4,7,5,9,10,6,4,4,7,5,9,10

Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

1,4,4,7,5,9,10,1,4,4,7,5,9,10

Source Code

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

Stacked Bar Chart

A stacked bar chart, also known as a stacked bar graph, is a graph that is used to break down and compare parts of a whole.

7,8,10,7,5,9,10,6,9,4,7,5,9,10,8

Stacked Bar Chart

A stacked bar chart, also known as a stacked bar graph, is a graph that is used to break down and compare parts of a whole.

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

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

A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

7,8,10

Pie Chart

A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

3,4,4,7,5,9,10,6

Source Code

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