Creating a pie chart with local data

1. As with all of our data-bound examples, we start by creating an Ext.data.Model.
We give it two fields—Language and Percentage:
Ext.define('LanguageShare', {
extend: 'Ext.data.Model',
fields: [{
name: 'Language',
type: 'string'
}, {
name: 'Percentage',
type: 'int'
}]
});

2. Now we define a data set to display in our chart. I have omitted some of the data
for brevity:
var languageShareData = [{
Language: 'C',
Percentage: 7
},
...
{
Language: 'Others',
Percentage: 22
}];

3. Next we create an Ext.data.Store and load in our dataset. This will be used to
bind to our chart:
var languageShareStore = Ext.create('Ext.data.Store', {
model: 'LanguageShare',
data: languageShareData
});

4. Define an Ext.Panel containing an Ext.chart.Chart configuration object, using
its xtype, as its only item:
var panel = Ext.create('Ext.Panel', {
width: 600,
height: 400,
title: 'Pie Chart - Language\'s Share of GitHub Repositories',
layout: 'fit',
items: [{
xtype: 'chart'
}],
style: 'margin: 50px',
renderTo: Ext.getBody()
});
5. We can now bind our chart to the Store we created in Step 3:
...
{
xtype: 'chart',
store: languageShareStore
}
...
6. Our next step is to create our Ext.chart.series.Pie instance that will tell the
chart that we want the data to be represented as a pie chart. We tell it that the
Percentage field is the one to use to calculate the size of each slice:
{
xtype: 'chart',
store: languageShareStore,
series: [{
type: 'pie',
angleField: 'Percentage'
}]
}

7. At this stage our pie chart will render our data but, by default, won't have any labels
attached so we don't know which slice refers to which data! We can add a label to
each slice by using the label property and configuring it with the field to grab the
label value from and some other display properties:
{
type: 'pie',
angleField: 'Percentage',
label: {
display: 'rotate',
contrast: true,
field: 'Language'
}
}