Highlight weekend with a plot band or a zone - highcharts

Question

I would like highlight the weekend in a timeseries chart. Until now and reading the documentation I think it is two ways of achieving this: plot bands or zones. I just managed to highlight the saturdays and sunday on the x axis(see code below). I would like to plot a band instead.(see 1).
xAxis: {
type: 'datetime',
crosshair: {
width: 2,
color: '#F66',
dashStyle: 'shortdot'
},
labels: {
formatter: function () {
var day = Highcharts.dateFormat('%a', this.value);
if (day == "Sat" || day == "Sun") {
return `<b>${Highcharts.dateFormat('%a %e %b', this.value)}</b>`;
} else {
return Highcharts.dateFormat('%a %e %b', this.value);
}
}
}
}
}

Answer 1

Here is my idea how to add plotBands dynamically based on the used data. I think that everything is clear in the code - if not, feel free to ask.
Demo: https://jsfiddle.net/BlackLabel/6n4ab7jm/
events: {
load() {
let chart = this,
plotBandAr = [],
plotBand = {
color: '#FCFFC5',
};
chart.series[0].points.forEach(p => {
// start from the saturday
if (new Date(p.x).getDay() === 6) {
plotBand.from = p.x
}
// end on the sunday
if (new Date(p.x).getDay() === 0) {
plotBand.to = p.x
}
// add plotBand on monday and reset the plotBand object
if (new Date(p.x).getDay() === 1) {
plotBandAr.push(plotBand)
plotBand = {
color: '#FCFFC5',
};
}
});
chart.xAxis[0].update({
plotBands: plotBandAr
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update