Question

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 do 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 looked for some kind of Ext.chart.series.Line config option to set the z-index but was not successful.

I’ve already extended the base theme to define custom stroke-widths for the different lines, so I started to look for some kind of theme option to set a series z-index but have not been successful on that either.

Any ideas?

EDIT:

I’ve added the zindex config to my extended chart theme, this produces no errors but doesn’t change anything in the chart at all (the first series listed with z-index 4 is on bottom, z-index 5 is second from bottom, z-index 3 is 3rd from bottom, etc.), seems it’s over-ruled somewhere:

// 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));
    }
});

Answer 1

Ok, I sorted it out, zIndex not zindex in the custom theme:

// 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));
    }
});