Chartjs annotation plugin colored box colors get summed after switching back and forth

Question

I am using chartjs annotation plugin for colouring box areas on my scatter chart (init chart code below). It works as I expect it:

If I reload page it rerenders ok with same colours on chart, but if I switch to another tab and back, the colours on chart seem to sum up:

I have no clue why colours add up. When I check initChart config it has the same 9 annotations and no others, as it should. For datasets I have custom images as seen of chart. The instance of chart also changes on switch.

var ctx = document.getElementById('chart-container');

    var initChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: customDatasets
        },
        options: {
            onClick: function (evt) {
                let element = initChart.getElementAtEvent(evt);
                if (element && element.length) {
                    let index = element[0]._datasetIndex;
                    let dataset = initChart.data.datasets[index];
                    openPerson(dataset.data[0].personId);
                }
            },
            onHover: function(evt) {
                let point = this.getElementAtEvent(evt);
                if (point.length) {
                    evt.target.style.cursor = 'pointer';
                } else {
                    evt.target.style.cursor = 'default';      
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    gridLines : {
                        display : false
                    },
                    ticks: {
                        max: 9,
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'X axis'
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display : false
                    },
                    ticks: {
                        max: 9,
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Y axis'
                    }
                }]
            },
            tooltips: {
                mode: 'dataset',
                displayColors: false,
                callbacks: {
                    beforeBody: function (d, t) {
                        let datasetIndex = d[0].datasetIndex;
                        return t.datasets[datasetIndex].label;
                    }
                }
            },
            hover: {
                animationDuration: 0 // duration of animations when hovering an item
            },
            annotation: {
                annotations: [
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 0, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(128, 225, 0, 0.4)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(255, 0, 0, 0.1)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 0, 0, 0.1)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(128, 225, 0, 0.3)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(128, 225, 0, 0.3)",
                        borderWidth: 0
                    }
                ]
            }
        }
    });

Answer 1

Found the issue. After creation of new chart instance the new plugin is registered. After changing tab the plugin didn't unregister and same one registered again. Added manual unregister with Chart.pluginService.unregister() method.