PDA

View Full Version : How to change the chart colors wit a theme assigned



oudevoshaar
30 Jan 2012, 5:25 AM
Hi,

I'm new to designer and trying to change the colors of the charts (column,line or area)
For some reason if i set a style overide with color or fill this does not effect a change to the grah.

How can I overrule the theme colors to change the color of the column chart or Line?

My Code from designer:
Ext.define('MyApp.view.ui.MyChart', {
extend: 'Ext.chart.Chart',
autoRender: true,
height: 250,
id: 'chart_daystats',
width: 400,
shadow: true,
autoSize: true,
animate: true,
insetPadding: 20,
store: 'store_daystats',
theme: 'Sky',
flex: 3,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
legend: {
},
axes: [
{
type: 'Category',
fields: [
'date'
],
position: 'bottom',
title: 'Datum'
},
{
type: 'Numeric',
dashSize: 1,
fields: [
'cnt'
],
majorTickSteps: 5,
position: 'left',
title: 'Tweets',
adjustMaximumByMajorUnit: true
}
],
series: [
{
type: 'column',
label: {
display: 'insideEnd',
field: 'cnt',
color: '#333',
'text-anchor': 'middle'
},
title: 'Total_tweets',
xField: 'date',
yField: [
'cnt'
],
xPadding: 0
},
{
type: 'line',
title: 'Negative',
xField: 'date',
yField: [
'negative'
],
}
]
});
me.callParent(arguments);
}
});