Highcharts is a versatile JavaScript charting library for the web. The library supports all kinds of charts: scatter plots, line charts, area chart, bar charts, pie charts and more.

A data series of type *line* or *spline* connects the points in the order of the x-axis when rendered. It is possible to invert the axes by setting the property *inverted: true* in the chart options.

var chart = $('#chart').highcharts({ chart: { inverted: true }, series: [{ name: 'Example', type: 'line', data: [ {x: 10, y: 50}, {x: 20, y: 56.5}, {x: 30, y: 46.5}, // ... ] }] });

### Connecting points in an arbitrary order

Connecting the points in an arbitrary order, however, is not supported by default. I couldn’t find a Highcharts plugin which supports this either, so I implemented a solution by modifying the *getGraphPath* function of the series object:

var series = $('#chart').highcharts().series[0]; var oldGetGraphPath = series.getGraphPath; Object.getPrototypeOf(series).getGraphPath = function(points, nullsAsZeroes, connectCliffs) { points = points || this.points; points.sort(function(a, b) { return a.sortIndex - b.sortIndex; }); return oldGetGraphPath.call(this, points, nullsAsZeroes, connectCliffs); };

The new function sorts the points by a new property called *sortIndex* before the line path of the chart gets rendered. This new property must be assigned to each point object of the series data:

series.setData([ {x: 10, y: 50, sortIndex: 1}, {x: 20, y: 56.5, sortIndex: 2}, {x: 30, y: 46.5, sortIndex: 3}, // ... ], true);

Now we can render charts with points connected in an arbitrary order like this: