PDA

View Full Version : How to change line chart series order



ejerrywest
1 Jan 2012, 8:00 PM
I have a line chart with multiple series in 4.02. At different points the series lines cross, I need a specific line to remain as the top line i.e. biggest z-index (so that this line highlights and displays its tips when hovered over as opposed to the other ones).

I did not want to just reorder the sequence that the series are written in the javascript because I need the legend sequence to remain the same (they are all titled as dates and I want to keep them in date order).

I have been searching for some kind of Ext.chart.series.Line config option to set the z-index but have not been successful. In my code I've also extended the base theme to define custom stroke-widths for the different lines, is there some config option I can apply in my extended theme maybe?

mitchellsimoens
2 Jan 2012, 6:42 AM
In your theme, you couldn't set the z-index?

ejerrywest
2 Jan 2012, 1:28 PM
I tried this but it seems it gets overruled some where, the very first series listed in this custom theme (zindex: 4) shows up on the bottom, the next (zindex: 5) is second from the bottom, then the zindex: 3 series is third from the bottom, etc. zindex: 1 series is on top:


// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: ['rgb(0, 0, 0)', 'rgb(0,0,255)', 'rgb(255,0,0)', 'rgb(0,128,0)', 'rgb(128,0,128)'],
seriesThemes: [{
'stroke-width': 3,
zindex: 4
}, {
'stroke-width': 1,
smooth: false,
zindex: 5
}, {
'stroke-width': 1,
smooth: false,
zindex: 3
}, {
'stroke-width': 1,
smooth: false,
zindex: 2
}, {
'stroke-width': 1,
smooth: false,
zindex: 1
}]
}, config));
}
});

ejerrywest
2 Jan 2012, 6:22 PM
sorted it out, needed zIndex and not zindex in the custom theme