Highcharts Demo

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

var each = Highcharts.each,
		find = Highcharts.find;

Highcharts.chart('container', {
    tooltip: {
        shared: true,
        crosshairs: true,
        formatter: function (tooltip) {
        		var hoveredPoints = this.points,
            		chart = tooltip.chart,
            		xVal = this.x,
                tooltipStr = '<b>' + xVal + '</b>';

						// Go through each series and add its value to the tooltip string
						each(chart.series, function (series) {
								var	hoverPoint = find(hoveredPoints, function (p) {
                			return p.series === series;
                		}),
                    yVal = hoverPoint && hoverPoint.y,
                    numPoints = series.points.length,
                    i = numPoints,
                    pointLess,
                    pointMore,
                   	interpolated = yVal === undefined;

								if (interpolated) {
                		// We need to interpolate. Find a point with smaller and one with greater X value.
                    while (i--) {
                    		if (!series.points[i].isNull && series.points[i].x < xVal) {
                      			pointLess = series.points[i];
                          	break;
                      	}
                    }
                    for (i = 0; i < numPoints; ++i) {
                    		if (!series.points[i].isNull && series.points[i].x > xVal) {
                      			pointMore = series.points[i];
                          	break;
                      	}
                    }

										if (!pointLess || !pointMore) {
												// For ends, don't interpolate 
												yVal = '-';
                    } else {
												yVal = pointLess.y + (pointMore.y - pointLess.y) / (pointMore.x - pointLess.x) * (xVal - pointLess.x);
                    }
                }

                tooltipStr += '<br/>' + (interpolated ? '<span style="color: #999">' : '')
                						+ series.name + ': ' + yVal
                          	+ (interpolated ?...