Plotband nicht auf xAxis beschränkt, zeichnet für den gesamten Graphen

Ich versuche, ein Plotband zu erstellen, das auf nur einen Bereich beschränkt ist. Mein Diagramm ist ein Datetime-Diagramm mit mehreren Bereichen, die an eine xAchse gebunden sind. Ich versuche, Plotband für ein einzelnes Fenster hinzuzufügen, damit es nicht das gesamte Diagramm abdeckt. Aber mein Code liefert dieses Ergebnis: (Ich habe gerade das Plotband im ersten Diagramm zum Testen hinzugefügt)

const option = {
    labels: {
        align: "right",
        x: -3
    },
    title: {
        text: tagName,
        style: {
            color: colors[checkedTagNames.indexOf(tag)],
            fontWeight: "500",
            fontSize: "1em",
            fontFamily: "monospace"
        },
        useHTML: true
    },
    top: top * index + "%",
    height: (1 / tagOrder.length) * 100 + "%",
    lineWidth: 2,
    gridLineWidth: 0,
    offset: index % 2 === 0 ? 0 : 40,
    name: tag
};

// const plotBands = [

// ];

const plotBandOption =
    index === 0
        ? [
                {
                    // mark the weekend
                    color: "rgba(232, 48, 48, 0.38)",
                    from: moment(tagData[1 + index * 10].timestamp).valueOf(),
                    to: moment(tagData[3 + index * 10].timestamp).valueOf()
                }
          ]
        : [];

const xOption = {
    type: "datetime",
    top: top * index + "%",
    height: (1 / tagOrder.length) * 100 + "%",
    name: "x" + tag,
    // visible: true,
    plotBands: plotBandOption,
    linkedTo: 0,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent",
    minorTickLength: 0,
    tickLength: 0,
    labels: {
        enabled: false
    }
};

const seriesOption = {
    type: "line",
    name: tag,
    yAxis: index + 1,
    data: extractData(tagData),
    zoneAxis: "x",
    zones: testZones,
    color: colors[index % 10],
    step: true,
    dataGrouping: { enabled: false },
    tooltip: {
        pointFormatter: function() {
            const color = colors[index] ? colors[index] : "";
            const unit = checkedTags[index] ? checkedTags[index].engUnit : "";

            return (
                '<span style="color:' +
                color +
                '">' +
                this.series.name +
                "</span>: <br/> <strong>" +
                +this.y.toFixed(3) +
                " " +
                unit +
                "</strong>"
            );
        }
    }
};

chart.addAxis(option, false, false);
chart.addAxis(xOption, true, false);
chart.addSeries(seriesOption);