Bands with null values incorrectly rendered

I’m trying to create a line chart with min/max bands that don’t exist for all points (=> set to null values). However I’m seeing some weird fillings: (Please ignore the fact that min/max values aren’t actually min/max all the time, that’s a different problem on my side I still need to fix)

The point is that I don’t expect the green band at the last few points that have null low/high values. Any idea about that?

For reference, here’s the code I’m using to create the plot:

opts = {
  title: "Temperature",
  id: "chart1",
  class: "my-chart",
  width: 400,
  height: 300,
  tzDate: ts => uPlot.tzDate(new Date(ts), 'Etc/UTC'),
  series: [
    {},
    {
        label: "Low",
        stroke: "green",
    //	fill: "rgba(0, 0, 0, .07)",
        value: (u, v) => v + "°C",
        width: 1,
    },
    {
        label: "High",
        stroke: "red",
        value: (u, v) => v + "°C",
        width: 1,
    },
    {
        label: "Avg",
        stroke: "blue",
        width: 2,
        value: (u, v) => v + "°C",
    }
  ],
  bands: [
        {
            series: [2,3],
            fill: "rgba(255,0,0,0.1)",
        },
        {
            series: [3,1],
            fill: "rgba(0,255,0,0.1)",
        }
    ],
    scales: {
        x: {
        //	dir: -1,
        //	ori: 1,
        },
        y: {
        //	dir: -1,
        //	ori: 0,
        },
    },
    axes: [
        {
        //	side: 3
        },
        {
        //	side: 2,
            values: (u, vals) => vals.map(v => v + "°C")
        }
    ]
};
let uplot = new uPlot(opts, data, node);

data is an array containing 4 arrays in [time, low, high, avg] order. The arrays are of equal length and low/high have an equal number of null values at the end. The timestamps are in increasing order.

[Christian-Sander]

Looks good to me now! Tested on Firefox and Edge.

[leeoniya]

ok, should be fixed.

let’s see how many more times i have to re-close this one 🤣