I did it in other way (cause I have multiple series, and I'm in typescript, so it is not 1:1 with javascript version):
Code: Select all
chartOptions: Highcharts.Options = {
chart: {
events: {
render: () => {
const chart = this.chartRef;
const series = chart.series;
if (series.length > 0) {
if (chart.myBackgrounds !== undefined) { // <- checking if myBackgrounds is on :)
chart.myBackgrounds.forEach(point => {
point.destroy(); // <- If there are some myBackgrounds we need to destroy them. We cannot just clear the array, cause it won't work (no idea why :mrgreen: )
});
}
chart.myBackgrounds = []; // <- now we can clear array
series.forEach(serie => {
const points = serie.points;
if (points.length > 0) { // <- checking if serie has points, cause if not points.find will throw error that points is undefined
const point = points.find(p => {
if (p.visible === false) {
return p; // <- I set visible attribute to false for every point that I want to be as backgrounds. I don't know if this is the best way (i was thinking if point.custom.thisIsBackgroundPoint will work, but this is fine for me at this stage)
}
});
if (point !== undefined) { // <- checking if we have background points
const myRect = chart.renderer.rect(
point.shapeArgs.x + chart.plotLeft, point.shapeArgs.y + chart.plotTop,
point.shapeArgs.width, point.shapeArgs.height, point.shapeArgs.r) // <- drawing the rectangle, and this is the easiest way to do this, cause we don't have to compute hardly anything :) (point.shapeArgs is computed in Highcharts, and chart.plot are computed too)
.attr({
'stroke-width': 1,
stroke: 'black',
fill: 'rgb(51, 102, 204)',
opacity: 0.2,
zIndex: -1
})
.add();
chart.myBackgrounds.push(myRect); // <- adding rectangle to myBackgrounds and that's it
}
}
});
}
}
}
}
}
The only thing that I found peculiar is that I cannot update this event with update'ing Highcharts.Options (as I remember I can update point.events with Highcharts.Options, but I can't update chart.events)