> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/charts/sparkline-chart.md).

# Sparkline Chart

## Introduction

 This [jQuery](http://jquery.com/) plugin generates [sparklines](https://omnipotent.net/jquery.sparkline/#s-about) (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

## How to Setup

### **HTML Structure**

```markup
<div id="sparkline_3"></div>
```

## Dependency

### JS

```markup
<!-- Sparkline JavaScript -->
<script src="vendors/jquery.sparkline/dist/jquery.sparkline.min.js"></script>
<script src="dist/js/sparkline-data.js"></script>
```

### Initialize Echarts JS

#### Line Chart

```javascript
if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([2,4,4,6,8,5,6,4,8,6,6,2 ], {
		type: 'line',
		width: '100%',
		height: '50',
		resize: true,
		lineWidth: '1',
		lineColor: '#00acf0',
		fillColor: '#edf9fe',
		spotColor:'00acf0',
		spotRadius:'2',
		minSpotColor: '#00acf0',
		maxSpotColor: '#00acf0',
		highlightLineColor: 'rgba(0, 0, 0, 0)',
		highlightSpotColor: '#00acf0'
	});
}
```

#### Bar Charts

```javascript
if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([0,2,8,6,8,5,6,4,8,6,6,2 ], {
		type: 'bar',
		width: '100%',
		height: '50',
		barWidth: '5',
		resize: true,
		barSpacing: '5',
		barColor: '#00acf0',
		highlightSpotColor: '#00acf0'
	});
}
```

#### Pie Charts

```javascript
if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([20,4,4], {
		type: 'pie',
		width: '50',
		height: '50',
		resize: true,
		sliceColors: ['#00acf0', '#22af47', '#ffbf36']
	});
}
```