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

plotly.js
1

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:

Capture2
Capture2875×426 18 KB

What I want is something to look like this:

Capture
Capture710×232 37.8 KB

Can anyone advice on how to achieve this?

Thanks

2

You can apply scene.aspectratio similar to this demo.

3

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

1 Like