Chart customizing labels, colors, and axes

1. Start by defining a model to define the data we are loading:
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'value',
type: 'int'
}]
});

2. Create a store with an AJAX proxy:
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'BarChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});

3. Create a chart bound to the store and render it to the document's body:
var chart = Ext.create('Ext.chart.Chart', {
width: 600,
height: 400,
animate: true,
store: store,
style: 'margin: 50px',
renderTo: Ext.getBody()
});

4. Add the theme config to the chart and set it to red, then apply a gradient to
the background:
var chart = Ext.create('Ext.chart.Chart', {
...
theme: 'Red',
background: {
gradient: {
angle: 30,
stops: {
0: {
color: '#FFFFFF'
},
100: {
color: '#FFDBDB'
}
}
}
}
});

5. We need axes for the bar chart. Add a Numeric and Category axis as follows:
var chart = Ext.create('Ext.chart.Chart', {
...
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['value'],
title: 'Value',
minimum: 1,
maximum: 35,
decimals: 0,
majorTickSteps: 10,
minorTickSteps: 5,
grid: {
'stroke-width': 2
}
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Name',
label: {
rotate: {
degrees: 315
}
}
}]
});

6. Finally, add a bar series. The label, in this case, adds the values for each bar:
var chart = Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'bar',
axis: 'bottom',
xField: 'name',
yField: 'value',
label: {
field: 'value',
display: 'insideStart',
orientation: 'horizontal',
color: '#333'
}
}]
});

Creating a bespoke theme
Creating a bespoke theme is done by extending the Ext.chart.theme.Base class and
adding your own custom styles/colors to its various properties.
The following theme is by no means complete. However, it illustrates how to go about
creating one:
Ext.define('Ext.chart.theme.MyTheme', {
extend: 'Ext.chart.theme.Base',
constructor: function(config){
this.callParent([Ext.apply({
axis: {
fill: '#ccc',
stroke: '#ccc'
},
colors: ['#111', '#333', '#555', '#777', '#000']
}, config)]);
}
});