✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

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

Hi, 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 advice on how to achieve this?

Thanks

You can apply scene.aspectratio similar to this demo.

Yap, this is exactly what I am looking for. Thank you very much @archmoj. Appreciate your help.

1 Like