PDA

View Full Version : How to use customized theme in ext charts



mrprabu
13 Feb 2014, 12:53 AM
In below code I customized my theme which extend extend: 'Ext.chart.theme.Base',

in my chart , How I can call custom theme in below highlighted

like { xtype: 'chart',
height:800t,
width: 500,
theme: 'Category1', // How to call my custom theme here
animate: me.animate,
id: chartId,
store: me.store,
insetPadding: 25,
shadow: false,
gradients: me.chartColors,
axes: me.axes,
series: me.series,
legend: me._getLegend(me.legend, me.legendPosition)
}]

kindly some assist me


Ext.define('myProject.ux.charts.theme.MyTheme', {
extend: 'Ext.chart.theme.Base',
colors: Ext.create('Ext.chart.theme.Base').colors,
background: '',
constructor: function(config) {
var me=this;
if(!me.background){
me.background ="#F1F1F1";
}
this.callParent([Ext.apply({
colors: me.colors,
padding: '0 0 0 0',
background: me.background,
axes: {
adjustEnd: true
},
axis: {
'stroke-width': 0
},
axisLabelBottom: {
fill: '#000',
font: '11px Arial',
spacing: 0,
padding: 2,
renderer: function(v) {
return v;
}
},
axisLabelUp: {
fill: '#000',
font: '11px Arial',
spacing: 0,
padding: 2,
renderer: function(v) {
return v;
}
},
axisLabelLeft: {
fill: '#000',
font: '11px Arial',
spacing: 0,
padding: 0,
margin: 0
},
axisLabelRight: {
fill: '#000',
font: '11px Arial',
spacing: 0,
padding: 0,
margin: 0
},
axisTitleBottom: {
fill: "#444",
font: "bold 14px Arial"
},
axisTitleTop: {
fill: "#444",
font: "bold 14px Arial"
},
axisTitleLeft: {
fill: "#444",
font: "bold 14px Arial"
},
axisTitleRight: {
fill: "#444",
font: "bold 14px Arial"
},
seriesLabel: {
fill: "#333",
font: "bold 11px Arial"
}
}, config)]);
}
});

mdnaveed42
13 Feb 2014, 1:28 AM
Hi,

Following are links which might give you info on this and also understanding about applying themes..

http://www.sencha.com/forum/showthread.php?136261-Ext-4-Chart-Themes-where-are-they
http://www.sencha.com/forum/showthread.php?276217-Can-I-use-custom-namespace-for-Extjs-chart-theme
http://pastebin.com/jjUXwpiR


Hope this works for you :)

Thanks,
Md Naveed
\m/

mrprabu
13 Feb 2014, 6:38 PM
Thanks Naveed,

Let me try now