AmChart Integration with EXTJS




This article is a brief overview on how we can integrate JavaScript charting frameworks with EXTJS.

There are various open source JavaScript charting frameworks available. In this article we will cover how to integrate AmChart with EXTJS, AmCharts is an JavaScript charting library which provides different data visualisation.

Let us try to implement AmChart in EXTJS.


  • AmCharts amcharts library.
  • Sencha Ext-JS development environment(Sencha cmd , ExtJS SDK etc).
  • Sample ExtJS application.
  • Working knowledge of Sencha ExtJS.

Getting Started

Following are the quick steps:

Step 1 : Create EXT JS Application.

Create an ExtJS app, To create ExtJS app follow the link given below.

Creating new ExtJS app

Step 2 : Download AmChart Library.

Download the AmChart library from the following url and extract the contents of the archive to a directory of your choice.  

Step 3 : Adding AmChart library files in our application. 

Create a folder name like “lib” in our application


Copy “amcharts” directory from downloaded zip file into your “lib” folder and open the amcharts folder to see the list of files.

The amcharts folder contains the following files.


Open the app.json file to include the require amcharts library files path into the file.


After including the path it looks like this.


Step 4 : Defining Chart Store Class.

Define new class in your application and extend the class with “”.

Follow the following code –

Ext.define('App.ChartStore', {
 extend: '',
 fields: ['categoryName', 'categoryVal', 'sliceColor'],
 data: [
 "customerName": "United States",
 "amount": "10000",
 "sliceColor": "#02105F"
 }, {
 "customerName": "India",
 "amount": "1000",
 "sliceColor": "#B02A30"
 }, {
 "customerName": "China",
 "amount": "10000",
 "sliceColor": "#C36700"
 }, {
 "customerName": "Brazil",
 "amount": "10900",
 "sliceColor": "#7585E3"
 }, {
 "customerName": "Qatar",
 "amount": "10000",
 "sliceColor": "#D1CECE"
 }, {
 "customerName": "United Kingdom",
 "amount": "30000",
 "sliceColor": "#F78200"
Step 5 : Defining Chart Class.

Define a new class in your application and extend it with “Ext.container.Container”, while giving the alias name as piechart.

Follow the following code –

Ext.define("App.AmPieChart", {
 extend: "Ext.container.Container",
 alias: "widget.piechart",
 layout: 'fit',
 cls: 'spendAnalysisDonutChart-cls',
 initComponent: function () {
 Ext.apply(this, {
 html: '<div id=' + this.chartId + ' style="width:' + this.width + 'px; height:' + this.height + 'px;"><div>'
 var st = Ext.getStore(;
 st.on('load', this.refreshData, this);
 refreshData: function () {
 if (!this.chart)
 onRender: function () {
 if (!this.chart)
 setup: function () {
 if (this.chart)
 this.chart = new AmCharts.AmPieChart();
 var legend = new AmCharts.AmLegend();
 this.chart.titleField = 'customerName';
 this.chart.valueField = 'amount';
 this.chart.radius = '30%';
 this.chart.colorField = 'sliceColor';
 this.chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>Loan Amount:[[value]]</b></span>";
 this.chart.startDuration = 0;
 this.chart.labelRadius = 20;
 this.chart.innerRadius = '50%';
 legend.position = this.position;
 legend.markerType = "circle";
 legend.markerLabelGap = 10;
 legend.markerSize = 10;
 legend.maxColumns = 1;
 legend.valueWidth = this.valueWidth;
 legend.fontSize = 15;
 legend.color = "#454545"
 update: function () {
 var asset = Ext.getStore(,
 data = [],
 for (obj in {
 this.chart.dataProvider = data;
Step 6 : Using Chart as xtype.

To use the PieChart in your application, create a panel and add PieChart in panel items.

Follow the following code –

Ext.create('Ext.panel.Panel', {
 title: 'AmChart In EXTJS',
 titleAlign: 'center',
 renderTo: Ext.getBody(), 
 items: [
 xtype: 'piechart',
 store: 'App.ChartStore',
 chartId: 'pieChartId',
 width: 700,
 height: 500,
 position: 'right'

Save and run your application in browser, following is the output how it looks like –



You may try it on Sencha Fiddle


In this article we learnt “how to integrate AmChart with EXTJS and use as xtype” by adding the AmChart library. Hope you found this helpful. 


I am an experienced full stack developer with expertise in Angular, Sencha, .Net, MS SQL Server, Azure, MEAN Stack and mobile app development. I love gaming, traveling and never miss a chance to unwind on a Friday evening with friends and beer!

Tagged with: , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: