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.
Demo source

<!-- Styles -->
<style>
#chartdiv {
 width: 100%;
  height: 500px;
}				
</style>

<!-- Resources -->
<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" />

<!-- Chart code -->
<script>
/**
 * Line Chart #1
 */
AmCharts.makeChart( "line1", {
  "type": "serial",
"theme": "none",

  "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
  }, {
    "day": 3,
    "value": -18
  }, {
    "day": 4,
    "value": -12
  }, {
    "day": 5,
    "value": -51
  }, {
    "day": 6,
    "value": 12
  }, {
    "day": 7,
    "value": 56
  }, {
    "day": 8,
    "value": 113
  }, {
    "day": 9,
    "value": 142
  }, {
    "day": 10,
    "value": 125
  } ],
  "categoryField": "day",
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 5,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "value",
    "showBalloon": false,
    "lineColor": "#ffbf63",
    "negativeLineColor": "#289eaf"
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "guides": [ {
      "value": 0,
      "lineAlpha": 0.1
    } ]
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "startOnAxis": true
  }
} );

/**
 * Column Chart #2
 */
AmCharts.makeChart( "column2", {
  "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,
    "showBalloon": false,
    "lineColor": "#ffbf63",
    "negativeFillColors": "#289eaf",
    "negativeLineColor": "#289eaf"
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Bullet Chart #1
 */
AmCharts.makeChart( "thermometer1", {
  "type": "serial",
  "dataProvider": [ {
    "x": 1,
    "y": 100
  } ],
  "categoryField": "x",
  "rotate": true,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "y",
    "type": "column",
    "fillAlphas": 1,
    "fillColors": [ "#49cbec", "#f73838" ],
    "gradientOrientation": "horizontal",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "stackType": "100%",
    "guides": [ {
      "value": 66,
      "lineAlpha": 1,
      "above": true
    } ]
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Bullet Chart #2
 */
AmCharts.makeChart( "thermometer2", {
  "type": "serial",
  "dataProvider": [ {
    "x": 1,
    "y": 100
  } ],
  "categoryField": "x",
  "rotate": true,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "y",
    "type": "column",
    "fillAlphas": 1,
    "fillColors": [ "#49cbec", "#f73838" ],
    "gradientOrientation": "horizontal",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "stackType": "100%",
    "guides": [ {
      "value": 29,
      "lineAlpha": 1,
      "above": true
    } ]
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Percent Chart #1
 */
AmCharts.makeChart( "percent1", {
  "type": "serial",
  "dataProvider": [ {
    "x": 1,
    "y1": 66,
    "y2": 34
  } ],
  "categoryField": "x",
  "rotate": true,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "y1",
    "type": "column",
    "fillAlphas": 0.6,
    "fillColors": "#000000",
    "gradientOrientation": "horizontal",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  }, {
    "valueField": "y2",
    "type": "column",
    "fillAlphas": 0.2,
    "fillColors": "#000000",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "stackType": "100%"
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Percent Chart #2
 */
AmCharts.makeChart( "percent2", {
  "type": "serial",
  "dataProvider": [ {
    "x": 1,
    "y1": 29,
    "y2": 71
  } ],
  "categoryField": "x",
  "rotate": true,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": "y1",
    "type": "column",
    "fillAlphas": 0.6,
    "fillColors": "#000000",
    "gradientOrientation": "horizontal",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  }, {
    "valueField": "y2",
    "type": "column",
    "fillAlphas": 0.2,
    "fillColors": "#000000",
    "lineColor": "#FFFFFF",
    "showBalloon": false
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "stackType": "100%"
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  }
} );

/**
 * Pie Chart #1
 */
AmCharts.makeChart( "pie1", {
  "type": "pie",
  "dataProvider": [ {
    "x": 1,
    "value": 29
  }, {
    "x": 2,
    "value": 71
  } ],
  "labelField": "x",
  "valueField": "value",
  "labelsEnabled": false,
  "balloonText": "",
  "valueText": undefined,
  "radius": 9,
  "outlineThickness": 1,
  "colors": [ "#DADADA", "#777777" ],
  "startDuration": 0
} );

/**
 * Pie Chart #2
 */
AmCharts.makeChart( "pie2", {
  "type": "pie",
  "dataProvider": [ {
    "x": 1,
    "value": 45
  }, {
    "x": 2,
    "value": 55
  } ],
  "labelField": "x",
  "valueField": "value",
  "labelsEnabled": false,
  "balloonText": "",
  "valueText": undefined,
  "radius": 9,
  "outlineThickness": 1,
  "colors": [ "#DADADA", "#777777" ],
  "startDuration": 0
} );
</script>

<!-- HTML -->
<!-- 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; height: 20px;"></div>
</div>