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?

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?

• javascript
• charts
• highcharts

• can we have jsFiddle to fiddle with? – Jugal Thakkar Commented Nov 10, 2012 at 7:01

4 Answers 4

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

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

Highcharts are made out of svg elements, which are not directly controlled by things like z-index. However, you still can control what elements are rendered ontop of what - the last element in an svg tree is drawn over the rest, so to promote an element to the front you can just pop it out, and append to the svg element containing the chart.

A nuance of the solution above because the above suggestion did not worked for me. I've got a case where the point for the Toolip was not clickable in Area chart when areas were overlapping although the Tooltip was showing.

It worked out by adding in the Tooltip formatter the solution above but to the parent group.

tooltip :{
   ...
   formatter () {
        this.point.graphic.parentGroup.toFront();
        ...
   }
}