# Graph > Inline Charts

- ##### My Income $47,171

  1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471

- ##### Site Traffic 45%

  110,150,300,130,400,240,220,310,220,300, 270, 210

- ##### Site Orders 2447

  110,150,300,130,400,240,220,310,220,300, 270, 210

# JQuery Sparklines Modified for easier usage

Sparklines are light weight, easy to use, inline charts. We have modified sparklines so you can use it with just `data-*` values, without the use of javascript

- Inline Graphs 90,30,60,40,60,70,50,40,70,60,90,50 also change width, height, and color 4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7

  <span data-sparkline-type="line" data-sparkline-width="50px" data-sparkline-height="18px">90,30,60,...</span>

- Compose inline charts and Composite Bar charts

  <span data-sparkline-type="compositeline" data-sparkline-height="15px" data-sparkline-line-val="[9,8,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

- Discrete bars 4,6,7,7,4,3,2,1,4,4 and with threshhold 4,6,7,7,4,3,2,1,4,4

  <span data-sparkline-type="discrete" data-sparkline-height="18px" data-sparkline-width="30" data-sparkline-threshold="4">4,6,7,...</span>

- Nifty Bar Charts 50,40,70,60,90,50 with negatives and thicker bars 5,6,7,2,0,-4,-2,4 and stacked bars 1:3, 5:3, 2:7,9:1,5:6

  <span data-sparkline-type="bar" data-sparkline-width="50px" data-sparkline-bar data-sparkline-height="15px">50,40,70,...</span>

- Box plots 10,12,12,9,7 and bullet plots 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100

  <span data-sparkline-type="compositebar" data-sparkline-line-width="1.5" data-sparkline-line-val="[6,4,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

- Pie Charts 3,5,2

  <span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

## Examples below are done without any javascript!

#### Pie Chart

3,5,2
30,20,15,35

#### Composite Chart

#### Bar Chart

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

#### Bar Stacked Chart

4:5,3:4,5:7,6:3,4:6,6:5,8:2,4:3,6:4,6:2,4:4,7:2,8:5,4:2

#### Composite Line with fills

4,3,3,1,4,3,2,2,3

#### Line chart variation

6,4,3,5,2,4,6,4,3,3,4,5,4,3,2,4,5,

#### + 39.57

##### -12.45

# Easy Pie Charts Simplified for faster production

Easy Pie Charts gives you a nice animation twist to your pie charts - they are also dynamic, which will make it a really nice ajax based live charts for your project

<div class="easy-pie-chart txt-color-blue easyPieChart" data-percent="36" data-size="180"> data-pie-size="50"> <span class="percent percent-sign txt-color-blue font-xl semi-bold">36</span> </div>

- 49
- 36
- 46
- 56
- 66
- 76
- 86