I am trying to add background color to gaps in data to be more visible on large intervals, I know that I can do that by adding plotbonds with the color I want, the problem is I don't have the start and end of the gap because it is created by defining the GapSize and GapUnit (no dates with null data, juste a gap in the dates). I tried adding the plotbonds by calculating the difference between the dates and comparing it to the tickInterval but no luck so far,
here is an example of gaps set with gapsize
plotOptions: {
series: {
gapSize: 1
}
}
Is there a simpler way of doing this ?
thanks
Highcharts internally adds null points to create gaps. You can get the calculated null points and based on their values, create plot-bands.
For example:
let plotBands = [];
let allowChartUpdate = true;
(function(H) {
H.wrap(H.seriesTypes.area.prototype, 'getGraphPath', function(proceed, points) {
const xAxis = this.xAxis;
plotBands = [];
points.forEach((p, index) => {
if (p.isNull) {
plotBands.push({
from: points[index - 1] ? points[index-1].x : xAxis.min,
to: points[index + 1] ? points[index+1].x : xAxis.max,
color: 'red'
});
}
});
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.stockChart('container', {
chart: {
type: 'area',
events: {
render: function() {
// prevent infinity loop
if (allowChartUpdate) {
allowChartUpdate = false;
this.xAxis[0].update({plotBands});
allowChartUpdate = true;
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/jz0n28om/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts