How to apply Multiple colors for Bar chart columns

[nawinm916]

Hi all,


Here i am having a chart which is a combination of Column and line.
Here incoming and outgoing are represented as column and profit is represented as line.
Incoming is combination of amount1,amount2,amount3.
Outgoing is combination of amount4,amount5,amount6,amount7.
In the below example all the above criteria is achieved.
But now i want show each bar should be divided with the internal amounts and they should be shown with different color.
Any help?


I am using Ext version 4.2.1.


Here is code for chart



var store = Ext.define('tz.store.VendorProfitsStore', {
extend : 'Ext.data.Store',
model: 'tz.model.VendorProfits',
fields : [ {name: 'id', type: 'int'},
{name: 'amount1' , type:'float'},
{name: 'amount2' , type:'float'},
{name: 'amount3' , type:'float'},
{name: 'amount4' , type:'float'},
{name: 'amount5' , type:'float'},
{name: 'amount6' , type:'float'},
{name: 'amount7' , type:'float'},
{name: 'profit' , type:'float'},
{name: 'incoming' , type:'float'},
{name: 'outgoing' , type:'float'},
{name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s.u'} ,
]
sorters: [{property: 'created',direction: 'DESC'}],
});


var chart = Ext.create('Ext.chart.Chart', {
width: 1000,
height: 550,
legend: {
position: 'right',
},
style: 'background:#fff',
animate: true,
theme: 'Category1',
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['incoming','outgoing','profit'],
title: 'Amount',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['created'],
title: 'Date',
label: {
renderer: function(value) {
return Ext.Date.format(value,'m/d/y');
}
},
}],
series: [{
type: 'column',
axis: 'left',
xField: 'created',
yField: ['incoming','outgoing'],
title: ['( A1+A2+A3 )','(B + C + D + E)'],
//stacked: true,
highlight: true,
markerConfig: {
type: 'cross',
size: 3
},
tips: {
trackMouse: true,
width: 500,
height: 28,
renderer: function(storeItem, item) {
if (item.yField == "incoming") {
this.update(Ext.util.Format.usMoney(storeItem.get('amount1')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount2')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount3')) + ' = '
+ Ext.util.Format.usMoney(storeItem.get('incoming'))
);
}else {
this.update(Ext.util.Format.usMoney(storeItem.get('amount4')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount5')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount6')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount7')) + ' = '
+ Ext.util.Format.usMoney(storeItem.get('outgoing'))
);
}
}
},
},{
type: 'line',
axis: 'left',
smooth: true,
highlight: true,
//fill: true,
//fillOpacity: 0.5,
xField: 'created',
yField: 'profit',
title:'Profit : ( A1+A2+A3 ) - (B + C + D + E)',
tips: {
trackMouse: true,
width: 100,
anchor:'100%',
height: 28,
renderer: function(storeItem, item) {
this.setTitle(Ext.util.Format.usMoney(parseInt(storeItem.get('profit'))));
}
},

}]
});


And requirement is as followed

54856


Thanks in advance

[Gary Schlosberg]

Here's a thread that might help:
https://www.sencha.com/forum/showthread.php?160333

[nawinm916]

Thanks Gary Schlosberg ,In the given thread, multiple colors applied for multiple bars. Now i required multiple colors in each bar.

[Gary Schlosberg]

Ah, sorry -- I should have looked more closely at the image you posted. Have you looked into a stacked column chart? Here's a bar example:
http://docs.sencha.com/extjs/4.2.5/#!/example/charts/StackedBar.html

Here's a related thread with a Fiddle:
https://www.sencha.com/forum/showthread.php?301546