PDA

View Full Version : Line and column series chart color set problem



mlopandic
24 Jan 2013, 2:12 AM
I have problem with color set with column and line series chart. Line and column series take same color set.
41507
As you can see line series takes same color as the first column series. I have set style for line series and legend displays it property but line series doesnt.
Following code for this graph:

var colors = [
'#01E7E8',
'#01E700',
'#FF6868',
'#FFB368',
];
Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function (config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));
}
});
var barChart1 = Ext.create('Ext.chart.Chart', {
renderTo: Ext.Element.get('chart'),
width: 990,
height: 400,
animate: true,
theme: 'Browser:gradients',
store: store,
legend: {
position: 'right',
update: false,
isVertical: false,
padding: 10,
itemSpacing: 20
},
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['consumption', 'consumption1', 'consumption2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Consumption',
grid: true,
minimum: 0
},
{
type: 'Numeric',
position: 'right',
fields: ['consumption3'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Money $',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Day of month'
}
],
series: [
{
type: 'line',
axis: 'right',
fill: false,
xField: 'name',
yField: 'consumption3',
highlight: {
size: 7,
radius: 7
// 'stroke-width': 0
},
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('consumption3') + ' $');
}
},
style: {
stroke: '#ff0000',
'stroke-width': 2,
fill: '#0000ff',
opacity: 0.2
}
},
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('consumption3') + ' $');
}
},
listeners:{
itemmousedown : function(obj)
{
// window.location.href = 'Comparation?Date='+new Date(selectedDate.getFullYear(), selectedDate.getMonth(),obj.storeItem.data['name']);;
dailyStore.load();
}
},
stacked: true,
xField: 'name',
//yField: 'data',
yField: ['consumption', 'consumption1', 'consumption2'],
}
]
});

mitchellsimoens
28 Jan 2013, 12:27 PM
It's two different series so the colors are going to be reused.