Highcharts connectNulls with dotted line - highcharts

Question

i have a simple line highchart with single "null" values.
I know, that I can connect the line with connectNulls: true.
Question:
Is it possible to mark the connection in a separate color or with a dotted line?
FIDDLE:
http://jsfiddle.net/SebastianH4/xpjqou95/1/

Answer 1

Yes, it is possible.
See here: http://jsfiddle.net/mtg6bd0o/3/
You can obviously use the trick described in brightmatrix's answer, but here's another solution:
Highcharts provides us a pretty simple to use Renderer API which lets us do some cool stuff such as drawing shapes, texts and paths (In general, svg elements).
Then using some chart manipulations together with the renderer, we can achieve this kind of goal.
var chart = $('#container').highcharts();
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
for (var i = 0; i < data.length; i++) {
var path = [];
if (data[i] == null) {
var p1 = chart.series[0].points[i - 1],
p2 = chart.series[0].points[i + 1];
p2 = p2 == undefined ? p1 : p2;
path.push('M');
path.push(p1.plotX + plotLeft, p1.plotY + plotTop);
path.push('L');
path.push(p2.plotX + plotLeft, p2.plotY + plotTop);
}
var line = chart.renderer.path(path)
.attr({
'stroke-width': 2,
stroke: Highcharts.getOptions().colors[0],
dashstyle: 'ShortDash'
})
.add();
}
I'll explain:
At first, we use 2 variables plotleft and plotTop which hold the values for the charts actual position relatively to the top and left coordinate.
Then I iterate the data, such that in each iteration I create a path array which has the initial point (where the line starts, comes after 'M'), and the end point coordinate (comes after 'L').
This is a standard way to create paths using SVG.
What actually happens is that for each null point, I take the previous and the next points's coordinates and push them to path.
Here I iterate some dummy data, it could obviously be retrived from the series itself.
Then, after I have the required coordinates, I can draw the line itself using the Renderer API (Reference: http://api.highcharts.com/highcharts#Renderer)
Working fiddle: http://jsfiddle.net/mtg6bd0o/3/

Answer 2

I found another question here on Stack Overflow that discusses a similar situation where a user wanted to color different segments of the same line (Highcharts: change line options mid-way through a line) as well as a Highcharts module that allows for multicolor series (http://blacklabel.github.io/multicolor_series/).
However, the crux of this is that those points need to have a value; they cannot be null. I tried adding a color to your null points, but enabling connectNulls ignored that setting and overrode it with the series default.
If this is a stand-alone chart that would not be fed random or updated data, you could plot a second series that sits behind the first and only has points where the first has nulls. Here's an example I worked up:
$(function () {
$('#container').highcharts({
title: {
text: 'LineWithNulls'
},
subtitle: {
text: 'How can I connect the the line in a different color or with a dotted line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [4, 5, 1, { y: null, color: 'red'}, 3, 4, 2, null, 5, 6],
connectNulls: false, zIndex: 2
}, {
/* differently formatted series for "null" values in first series
prevent from showing up in legend and prevent series from showing in tooltip on mouse over */
data: [null, null, 1, 2, 3, null, 2, 3.5, 5, null],
connectNulls: false, color: 'red', marker: {enabled: false}, dashStyle: 'dash', zIndex: 1, showInLegend: false, enableMouseTracking: false
}]
});
});`
You can also see the fiddle here: http://jsfiddle.net/brightmatrix/xpjqou95/3/
Please let me know whether this is helpful!