Black Lives Matter. Please consider donating to Black Girls Code today.

Chart size and Error: <rect> attribute width: A negative value is not valid. ("-60")

Hi, all

I’m having a problem with two graphs. In the first one, when the page loads, the size of the graphs is very small but when I change the size of the window the problem disappears.
(figure 1 and 2)


In the other graph when I resize there are a lot of javascript erros, like in the next figure, although there is no problem in the visualisation of the graph.

Thanks

Thanks for report!

Could you share the data / layout attributes you used to generate your graph to help us debug?

Hi etienne,

In the first graph:

       var trace1 = {
            x: eixoXWAI,
            y: eixoYWAI,
            mode: 'lines+markers',
            type: 'scatter',
            name: 'WAI',
            marker: {
                color: 'rgb(19,149,186)',
                size: 10
            }

        };

    var data = [trace1]

    var layout = {
        yaxis: {
            range: [0, 5]
        },
        xaxis: {
            range: eixoXWAI
        }
    };

In the second:
var data = [trace1, trace2]

            var layout = {
                shapes: [{
                    type: 'line',
                    x0: x0Ors,
                    y0: 25,
                    x1: x1Ors,
                    y1: 25,
                    line: {
                        color: 'grey',
                        width: 2,
                        'dash': 'dot'
                    }
                }, {
                    type: 'line',
                    x0: x0Ors,
                    y0: 36,
                    x1: x1Ors,
                    y1: 36,
                    line: {
                        color: 'grey',
                        width: 2,
                        'dash': 'dot'
                    }
                }],

                yaxis: {
                    range: [15, 40]
                },
                xaxis: {
                    range: eixoXOrs
                }
            };

(I’m loading this two graphs in the same page (in different tabs), and the problem begun there…)

Best