[Highcharts] How to select and highlight points in JavaScript

Only select the points according to the text your type in search bar

Highcharts supports a method under Point class to select any point you want. For the detail of method, you can ref the official document.

Call select() function to select the point

The India bubble was selected

But you will see it will highlight the point you select with a different style, it doesn’t look obviously. So, I use a different way to complete the “Selection”. You can see the first picture of this article, the selected points would keep the original color and opacity, but the remaining points were changed to low opacity (set opacity as 0.1 in this example). It would look clear and obvious.

Before I introduce the solution, you have to know the other property, “colorIndex” of Point class. It will provide you the current color index of the point. It will help you to change the opacity of this point and change back if you didn’t select any point after that. The color index are defined in ```Highcharts.theme.colors``` this array, this array is also mapped to the series in the chart.

You can see the Ln 6, we need to change the opacity back by calling point.update function and get the current color of the point by ```Highcharts.theme.colors``` and ```point.colorIndex```. Then we don’t need to do any thing for the selected points, we just need to change the opacity of the remaining points to let them be gray out. The effect is same as when you hover your cursor on any point, and it will change the opacity of other series. The default theme of Highcharts is null and undefined, you need to define your theme and apply to Highcharts first. Or you will got the error.

You can also define the colors for selected points directly, then you don’t need to change the opacity every time.

This demo was modified from the official Highcharts Demo. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/packed-bubble/

It may not be the best solution to complete the selection feature, but the effect is very obviously. And please let me know if you have other solutions. Thanks. :)