Show crosses for missing values in highcharts

highcharts-crosses-missing-value.js

/**
 * Highcharts plugin to draw crosses for null points
 */
(function(H) {
	H.wrap(H.Series.prototype, "drawPoints", function(proceed) {
		var series = this,
			points = this.points,
			renderer = this.chart.renderer;

		proceed.call(this);
		H.each(points, function(point, i) {
			var lastPlotY,
				lastI = i - 1,
				nextPlotY,
				nextI = i + 1,
				plotY;
			if (point.y === null) {
				while (lastI >= 0 && lastPlotY === undefined) {
					lastPlotY = points[lastI].plotY;
					lastI--;
				}
				while (nextI <= points.length - 1 && nextPlotY === undefined) {
					nextPlotY = points[nextI].plotY;
					nextI++;
				}

				// Interpolate
				plotY = (H.pick(lastPlotY, nextPlotY) + H.pick(nextPlotY, lastPlotY)) / 2;

				var path = ["M", point.plotX - 3, plotY - 3, "L", point.plotX + 3, plotY + 3, "M", point.plotX - 3, plotY + 3, "L", point.plotX + 3, plotY - 3];
				if (point.graphic) {
					point.graphic.attr({
						d: path,
					});
				} else {
					point.graphic = renderer
						.path(path)
						.attr({
							stroke: "red",
							"stroke-width": 1,
							fill: "none",
						})
						.add(series.markerGroup);
				}
			}
		});
	});
})(Highcharts);