Micro Charts & Sparklines

Sparkline is a very small chart, usually drawn without axes and other elements of a chart. It presents the general change of the data in a simple and condensed way. Sparklines are small enough to be embedded in text or table. You can easily make sparklines or other micro charts using our library. These are the same serial or pie charts with most of the default features and interactivity disabled, labels and other elements, like grid, axes hidden. If you need such a chart, simply start with one of these charts.

by ashishsingh

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- first chart group -->
<div class="chart-block" style="padding:28px">
  120 <div id="line1" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div> 6% <div id="column1" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
</div>

<!-- second chart group -->
<div class="chart-block" style="padding:28px">
  120 <div id="line2" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div> 6% <div id="column2" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
</div>

<!-- third chart group -->
<div class="chart-block" style="padding:28px">
  66% <div id="thermometer1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div><br />
  39% <div id="thermometer2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px"></div>
</div>

<!-- fourth chart group -->
<div class="chart-block" style="padding:28px">
  66% <div id="percent1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div><br />
  39% <div id="percent2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px;"></div>
</div>

<!-- fifth chart group -->
<div class="chart-block" style="padding:28px">
  71% <div id="pie1" style="vertical-align: middle; display: inline-block; width: 22px; height: 20px;"></div><br />
  45% <div id="pie2" style="vertical-align: middle; display: inline-block; width: 22px;...

CSS

#chartdiv {
 width: 100%;
  height: 500px;
}

JavaScript

/**
 * Line Chart #1
 */
AmCharts.makeChart( "line1", {
  "type": "serial",
"theme": "light",

  "dataProvider": [ {
    "day": 1,
    "value": 120
  }, {
    "day": 2,
    "value": 124
  }, {
    "day": 3,
    "value": 127
  }, {
    "day": 4,
    "value": 122
  }, {
    "day": 5,
    "value": 121
  }, {
    "day": 6,
    "value": 123
  }, {
    "day": 7,
    "value": 118
  }, {
    "day": 8,
    "value": 113
  }, {
    "day": 9,
    "value": 122
  }, {
    "day": 10,
    "value": 125,
    "bullet": "round"
  } ],
  "categoryField": "day",
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 5,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "value",
    "bulletField": "bullet",
    "showBalloon": false,
    "lineColor": "#a9ec49"
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "startOnAxis": true
  }
} );

/**
 * Column Chart #1
 */
AmCharts.makeChart( "column1", {
  "type": "serial",
  "dataProvider": [ {
    "day": 1,
    "value": -5
  }, {
    "day": 2,
    "value": 3
  }, {
    "day": 3,
    "value": 7
  }, {
    "day": 4,
    "value": -3
  }, {
    "day": 5,
    "value": 3
  }, {
    "day": 6,
    "value": 4
  }, {
    "day": 7,
    "value": 6
  }, {
    "day": 8,
    "value": -3
  }, {
    "day": 9,
    "value": -2
  }, {
    "day": 10,
    "value": 6
  } ],
  "categoryField": "day",
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "value",
    "type": "column",
    "fillAlphas": 1,
    "lineColor": "#a9ec49",
    "showBalloon": false
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Line Chart #2
 */
AmCharts.makeChart( "line2", {
  "type": "serial",
  "dataProvider": [ {
    "day": 1,
    "value": 120
  }, {
    "day": 2,
    "value": 54
  }, {
   ...