Starlight Responsive Bootstrap 4 Admin Template

Sparkline Charts

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

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