View Full Version : Mixed Series Chart Theme Overriding

17 Jun 2014, 11:08 PM
I have configured a mixed series chart with line, column combination. My requirement is to have more than one line series and column series. So I have used a for loop to push the line series first one by one. The Column Series need not be pushed one by one so took it normally. After all this, I'm reversing the series and included the same variable in series config.
Now my problem is I have used a theme override as follows :

Ext4.define('Ext.chart.theme.Theme', {
extend : 'Ext.chart.theme.Base',
baseColor: '#000099',
colors: chartColors,
constructor: function(config){
axis: {
fill: this.baseColor,
stroke: this.baseColor
colors: this.colors
}, config)]);
But this is not satisfying me as it is applying same color if I have more than one column series as below.49392

I've cross checked the colors being passed, they are all totally unique colors.
If I have only one column series it looks as :

I have to push using for loop as there may be > 1 line series everytime. Code I've used :

for(var i = 0; i < olColLength; i++){
xField: xCol,
yField: chartOtherInfo.olCol[i],
title: chartOtherInfo.olColHeaders[i],
markerConfig: markerCfg,
type: 'line',
axis: 'left',
var column_series = {
type: 'column',
axis: 'left',
xField: xCol,
yField: ySeries
var chart_series1 = chart_series.reverse();
var pivotChart = Ext4.create('Ext.chart.Chart', {
theme: 'Theme',
width: chartOtherInfo.chartWidth,
height: chartOtherInfo.chartHeight,
store: chartStore,
xtype: 'chart',
animate: true,
legend:Ext4.create('Ext.ux.chart.SmartLegend', {
position: 'top',
chart: pivotChart,
labelFont: '9px Arial',
boxStrokeWidth: 0
background: {
axes: [{
type: 'Numeric',
adjustMinimumByMajorUnit: true,
adjustMaximumByMajorUnit : true,
minimum: minRange,
maximum: maxRange,
position: 'left',
fields: storeFields,
title: chartOtherInfo.ylabel,
grid: true,
label: {
renderer: function(v){
if(chartOtherInfo.axisRenderer == '$')
return chartOtherInfo.axisRenderer+Math.round(v*100)/100;
return Math.round(v*100)/100+chartOtherInfo.axisRenderer;
font: '9px Arial'
labelTitle: {
font: 'bold 12px Arial'
}, {
type: 'Category',
position: 'bottom',
fields: xCol,
title: chartOtherInfo.xlabel,
//grid: true,
label: {
rotate: {
degrees: 315
font: '9px Arial',
renderer: function(s) {
this.fullname = s;
return Ext4.String.ellipsis(s,10);
labelTitle: {
font: 'bold 12px Arial'
series: chart_series1
Ignore certain variables as I can't provide total code here. Please help me :s

19 Jun 2014, 2:12 PM
You should be able to create a theme to apply each of your series like this:

Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor : function (config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors : [
}, config));

Or use the renderer for the series to set colors:

renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color