Set the size of plotly.js 3D plot height and width

I am working with plotly in javascript solution. I have an issue on setting the weight and the height of the 3D line plot. Below is my code:

<center id="GPSTraces"></center>
<script>
    var xs = [10, 20, 30, 40, 50];
    var ys = [10, 20, 30, 40, 50];
    var zs = [1, 2, 3, 4, 5];

    var trace = {
        type: 'scatter3d',
        mode: 'lines+markers',
        x: xs,
        y: ys,
        z: zs
    }

    var data = [trace]

    var layout = {
        height : 500,
        width : 1000,
        title: 'GPS Traces',
        scene: {
            xaxis: { title: 'X' },
            yaxis: { title: 'Y' },
            zaxis: { title: 'Z' },
        },
        autosize: true,
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 30,
            pad: 0
        },
    }

    Plotly.newPlot('GPSTraces', data, layout, { responsive: true });
    window.onresize = function() { Plotly.Plots.resize( 'GPSTraces' ); };
</script>

So even though I have set the line and the width, the plot shown is on cube shape and the plot left spaces on the left and right side of the canvas. Below is the result:

What I want is something to look like this:

Can anyone please advice me on how to achieve this?

Thanks