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

Question

I use HighCharts to create several hundred points. Each dot has an opacity value, and when highlighted, it is red. However, when I highlight some points, it is very difficult to see them, because there is an add-in of points.

I would like the selected point to be clearly visible, for example:

I select the points in the diagram 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 tried to set the z-index value of the point, but it doesn't seem to matter (I also tried 'z-index':'1000' ). Is there any other way so that I can make sure that the selected point is displayed on top of all other points?

Answer 1

Unfortunately, each point does not have the zIndex property. But, as mentioned in Bubbles, you can always add a point to the end so that it is very last and, therefore, appears at the top.

In addition, instead of iterating over all the points and adding styles directly to the element, I would recommend using the states:select parameter for high-speed charts. Then you can set a specific style for the selected state, and all you have to do is run select() at the point you want to highlight

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

Here's how you could select a point by clicking it to the end and pressing 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

Answer 2

UPDATE since 2014

This is an old question, but I thought I would be updating it for highcharts from 2014. Now you can use the built-in Element.toFront() method, which automatically appears and rejoins the vertex.

An example for moving a point to the data index i will be as follows:

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

And all you need!

API Source

Answer 3

Highcharts are made up of svg elements that are not directly controlled by things like z-index. However, you can still control which elements are displayed ontop of what - the last element in the svg tree is drawn on top of the rest, so to move the element to the forefront, you can simply pop up and add an svg element containing the chart to it.