Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Continuous error bars with data gaps

Hello all,

Is it possible to plot continuous error bars with data gaps? This is what I got so far and it’s not working. Thanks

        var trace1L = {
            x: ['2013-01-01', null,'2013-01-03', '2013-01-05'],
            y: [.5, null,1.5, 2.5],
            line: {width: 0},
            marker: {color: "444"},
            mode: "lines",
            name: "Lower Bound",
            type: "scatter"
        };
        var trace1 = {
            x: ['2013-01-01', null,'2013-01-03', '2013-01-05'],
            y: [1, null,2, 3],
            fill: "tonexty",
            fillcolor: "rgba(68, 68, 68, 0.3)",
            line: {color: "rgb(31, 119, 180)"},
            mode: "lines+markers",
            name: "Measurement",
            type: "scatter"
        };
        var trace1U = {
            x: ['2013-01-01', null,'2013-01-03', '2013-01-05'],
            y: [1.5, null,2.5, 3.5],
            fill: "tonexty",
            fillcolor: "rgba(68, 68, 68, 0.3)",
            line: {width: 0},
            marker: {color: "444"},
            mode: "lines",
            name: "Upper Bound",
            type: "scatter"
        };

        var data = [trace1L, trace1, trace1U];

        var layout = {
            hovermode: 'closest',
            title: 'data gaps',
        };

        Plotly.newPlot('graph', data, layout);

Thanks for sharing a very clear reproducible example.

I believe your issue is similar to what’s described in https://github.com/plotly/plotly.js/issues/1205

In the meantime, I suggest using a toself fill region: https://codepen.io/etpinard/pen/wrOvGm?editors=0010

That does the trick. I googled but couldn’t find an example. Thanks again.

Sorry but it was to premature saying it works. If there are multiple gaps then how would you terminate one and start next one. The only way I could think of is creating multiple traces. Thanks.

    var trace1 = {
        x: ['2013-01-01', null,'2013-01-03', '2013-01-04','2013-01-05',null,'2013-01-07', '2013-01-08','2013-01-09'],
        y: [1, null,2, 3, 5,6,7,7,7],
        fillcolor: "rgba(68, 68, 68, 0.3)",
        line: {color: "rgb(31, 119, 180)"},
        mode: "lines+markers",
        name: "Measurement",
        type: "scatter"
    };
    var trace1U = {
        x: ['2013-01-03', '2013-01-04', '2013-01-05', '2013-01-05','2013-01-04','2013-01-03','2013-01-07','2013-01-09'],
        y: [1.5, 2.5, 4.5, 5,3,2,6.5,6.5],
        fill: "toself",
        fillcolor: "rgba(68, 68, 68, 0.3)",
        line: {width: 0},
        marker: {color: "444"},
        mode: "lines",
        name: "Upper Bound",
        type: "scatter"
    };

If there are multiple gaps then how would you terminate one and start next one

by adding nulls in the x / y arrays.

Works perfectly now. Thanks again.

1 Like