Search for and zoom in to a scatter plot point (Highcharts, react.js)

Question

I'm using the highcharts library in react.js and it's working great. However, I'm plotting ~15,000 scattered points and it's a bit tricky finding the one I want among all that. I'd like to be able to search for a specific point, since each point has its own unique name property along with its x and y coordinates (not id, but I could put the name as id if that made the solution easier). When the point is found, the graph should zoom in a bit, since at default zoom level there's quite a few overlaps of points so just making it blink/bigger/something wouldn't help much. I've looked through the Highcharts API docs but I can't find anything that will do a manual zoom into specified coordinates.

I found the mapZoom function, but that's only for maps, and... well, this isn't a map. It's a scatter plot.

Also, since this is react, it's a bit tricky to see how I can access the chart object to do stuff with it, since the only time it exists is when it's being returned to be rendered:

 var CosinePlot = React.createClass({ componentDidMount: function() { let chart = this.refs.chart.getChart(); }, render: function() { return <ReactHighcharts config={plotConfig} isPureConfig={true}/>; } }); 

Answer 1

If you know exact point you want to zoom in, simply get it's x and y . Then zoom into that point using chart.xAxis[0].setExtremes(min, max) and chart.yAxis[0].setExtremes(min, max) .

And regarding accessing the chart object, I guess you are using this this wrapper . There is an explanation how to retrieve that chart object here .