amcharts Getting started with amcharts

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9


amCharts is a set of JavaScript-based data visualization libraries that includes regular chart types like Serial, Pie, etc. as well as advanced ones like Stock Charts and Maps.


Before you can use amCharts, you will need to include required JavaScript Libraries.

There is one main library that is required for all amCharts operations - amcharts.js. It needs to be included first and is mandatory.

Each chart type requires chart-type specific include. For example Serial chart, will also require serial.js, a Pie chart will need pie.js, etc.

If on the same web page you will be displaying several different chart types, you will need to include all chart-type-specific includes that are being displayed on that page.

Additional includes

Besides main required functional includes, you may need other includes, like themes and plugins. Those reside in /themes/ and /plugins/ sub-directories respectively.


<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

Creating a chart

The chart consists out of HTML container and the JavaScript code that instantiates a chart in it.


We use a <div> element as chart container.

<div id="chartdiv" style="height: 300px;"></div>


To instantiate the chart we use AmCharts.makeChart() function. The first parameter is an id of the container to place chart in, the second an object with chart config.

At the very least it must contain type parameter, which holds chart type.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  "categoryField": "country"

Loading from amCharts CDN

AmCharts provides a load-balanced, reliable CDN for loading the libraries directly from our web server. Use as a base URL for includes.

<script src=""></script>
<script src=""></script>

Loading libraries from your own server

To do that, [download][1] a required amCharts product ZIP archive.

Unzip it and place somewhere on your web server. I.e. in /amcharts/ sub-directory.

Then simply load them using <script> tags:

<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>

Got any amcharts Question?