How to set the z-index of points on a HighCharts scatter plot?

Question

I'm using HighCharts to plot a few hundred points. Each point has an opacity value, and when highlighted turns red. However, when I highlight some points it's very hard to see them, as there is over plotting of points.

What I would like is for the selected point to be clearly visible, like this:

I am selecting points on the chart using the following code:

updateChart = function(x){

    for (i=0; i<chart.series[0].data.length; i++){

        if(chart.series[0].data[i].config[2] == x){       
            chart.series[0].data[i].graphic.attr({'fill':'red', 'z-index':1000})
        }
        else{
            chart.series[0].data[i].graphic.attr('fill', 'rgba(0,255,0,0.6)')
        }        
    }
}

I have tried setting a z-index value of the point, but it does not seem to make a difference (I've also tried 'z-index':'1000'). Is there another way that I can make sure that the highlighted point is shown on top of all other points?

Answer 1

UPDATE as of 2014

This is an old question, but I thought I would update it for highcharts as of 2014. One can now use the built-in method Element.toFront() which automatically pops and re-appends to the top.

An example to move point at data index i would then be:

chart.series[0].data[i].graphic.toFront()

And thats all it takes!

API source

Answer 2

Unfortunately each point doesn't have a zIndex property. But like Bubbles mentioned, you can always add the point to the end so that it gets rendered very last and hence shows up on top.

Also, instead of looping through all the points and adding styles directly to the element, I would recommend leveraging the states:select option of highcharts. You can then set a particular style for the selected state and all you need to do is trigger a select() on the point you want to highlight

    marker: {
        states: {
            select: {
                fillColor: '#00ff00'
            }
        }
    }

Here is how you could highlight the point by pushing it to the end and triggering a select() on it

function highlightPoint(point){
    //save the point state to a new point
    var newPoint = {
        x: point.x,
        y: point.y
    };
    //remove the point
    point.remove();
    //add the new point at end of series
    chart.series[0].addPoint(newPoint);
    //select the last point
    chart.series[0].points[chart.series[0].points.length - 1].select();
}

demo @ jsFiddle