score:6

Accepted answer

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

score:0

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();
        ...
   }
}

score:3

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.

score:7

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


Related Query

More Query from same tag