Surround Highcharts points

Question

I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.

We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts? We need it to work on IE11 (client's specs).

We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript

Thanks in advance.

Answer 1

I am not very familiar with Highcharts, but i could not find such functionality in their API.
However there is an easy algorithm to solve your problem. All you need is to have an array containing the border elements and connect the points from this list like here.

Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right).
The resulting formula looks like

f(x) = m*x + b

Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.