CODEWITHSUNDEEP
javascripthighchartsreactjs
IronWaffleMan
IronWaffleMan

Reputation: 2692

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

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}/>;
	}
});

Upvotes: 0

Views: 1210

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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.

Upvotes: 3

Related Questions