Highcharts test tool
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
JavaScript
function interpolate(data) {
var resolution = 0.1,
interpolatedData = [];
data.forEach(function(point, i) {
var x;
if (i > 0) {
for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
interpolatedData.push({
x: Highcharts.correctFloat(x),
y: Highcharts.correctFloat(data[i - 1].y + (point.y - data[i - 1].y) *
((x - data[i - 1].x) / (point.x - data[i - 1].x)))
});
}
}
interpolatedData.push(point)
});
return interpolatedData;
}
var data1 = [{
x: 0,
y: 29.9
}, {
x: 1,
y: 71.5
}, {
x: 2,
y: 106.4
}, {
x: 3,
y: 129.2
}, {
x: 4,
y: 144.0
}, {
x: 5,
y: 176.0
}, {
x: 7,
y: 148.5
}, {
x: 8,
y: 216.4
}, {
x: 9,
y: 194.1
}, {
x: 10,
y: 95.6
}, {
x: 11,
y: 54.4
}];
var data2 = [{
x: 0.6,
y: 42
}, {
x: 2.35,
y: 12
}, {
x: 2.37,
y: 15
}, {
x: 4.1,
y: 87
}, {
x: 6,
y: 123
}, {
x: 8,
y: 56
}, {
x: 10,
y: 70
}];
Highcharts.chart('container', {
title: {
text: 'Interpolated tooltips in Highcharts'
},
tooltip: {
shared: true
},
xAxis: {
crosshair: true
},
series: [{
data: data1,
enableMouseTracking: false
}, {
data: interpolate(data1),
color: 'transparent',
linkedTo: ':previous'
}, {
data: data2,
enableMouseTracking: false
}, {
data: interpolate(data2),
color: 'transparent',
linkedTo: ':previous'
}]
});