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

Legend Position: Blank Space

In this example below, you can see that there is a big blank (white) space between the graph and the vertical legend (right-side).

How can I optimize the plot space bringing the legend more close from the graph?

Inside my HTML file:
<div id="myDiv" style="width:100%;height:100%"></div>

Inside my JS file:

const config = {
        showLink: false,
        editable: false,
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: ['sendDataToCloud', 'resetScale2d'],
        responsive: true,
        toImageButtonOptions: {
            format: 'png',
            filename: 'plot',
            height: document.getElementById("myDiv").offsetHeight,
            width: document.getElementById("myDiv").offsetWidth,
            scale: 2
        }
    };

    // Plot:
    Plotly.newPlot('myDiv', data, layout, config);

You could reduce the top margin: https://plot.ly/javascript/reference/#layout-margin-t

My doubt is not about the “top” margin.
My problem is the left-side blank…between the legend and the graph.

Could you help me?

@fem_dev Set a lower layout width.

2 Likes

@fem_dev in addition to reducing layout.width you could specify layout.legend.x position.
Here is a demo.
And you could find more info at https://plot.ly/javascript/reference/#layout-legend-x

1 Like

Thank you @empet and @archmoj

It worked well, but when I hit the Save Image Button, the browser starts the download…
In this moment, the graph layout changes! And I lose the layout.width in the browser screen and in the downloaded file.

"layout": {
    "showlegend": true,
    "legend": {
     "x": 0.75
    },
    "width": 1200,
    "height": 600
  }

Why?
How can I download the graph image (PNG) using this layout.width configuration?

@fem_dev glad it worked.
I updated the demo and added some colors to paper, scene and legend to help clarify the dimensions.
And here is the downloaded PNG:


Do you get a different result?

@archmoj your example runs perfect in the CodePen environment and in my local Google Chrome 79.
So I got the perfect PNG image…

Now, I can’t see in my code what is wrong!
I want that the plot area should be the full screen size. So…

In my index.html I set the div size like below (it works in your example too):
<div id="myDiv" style="width:100%; height:100%"></div>

My layout object is:

    let layout = {
        margin: {
            l: 0,
            b: 0
        },
        legend: {
            x: 0.75,
            font: {
                size: 16
            }
        },
        title: graphs[0].title,
        titlefont: {
            size: 30
        },
        scene: {
            autosize: true,
            aspectratio: aspect_ratio,
            xaxis: {
                title: graphs[0].axis[0].title,
                titlefont: {
                    size: 30
                },
                tickfont: {
                    size: 14,
                    color: 'black'
                },
                linecolor: 'black',
                linewidth: 2,
                mirror: true,
                automargin: true
            },
            yaxis: {
                title: graphs[0].axis[1].title,
                titlefont: {
                    size: 30
                },
                tickfont: {
                    size: 14,
                    color: 'black'
                },
                range: [axis_low_limit, axis_high_limit],
                linecolor: 'black',
                linewidth: 2,
                mirror: true,
                automargin: true
            },
            zaxis: {
                title: graphs[0].axis[2].title,
                titlefont: {
                    size: 30
                },
                tickfont: {
                    size: 14,
                    color: 'black'
                },
                range: [axis_low_limit, axis_high_limit],
                linecolor: 'black',
                linewidth: 2,
                mirror: true,
                automargin: true
            }
        }
    }

Could you say to my why in my case, when I click in the “Save Image” button, the Chrome screen changes and downloads a image without the correct legend position?

Here is my config object:

const config = {
        showLink: false,
        editable: false,
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: ['sendDataToCloud', 'resetScale2d', 'tableRotation', 'resetCameraLastSave3d'],
        responsive: true,
        toImageButtonOptions: {
            format: 'png',
            filename: 'plot',
            height: document.getElementById("myDiv").offsetHeight,
            width: document.getElementById("myDiv").offsetWidth,
            scale: 2
        }
    };

Please see https://github.com/plotly/plotly.js/issues/1576
and the workaround in https://codepen.io/etpinard/pen/NpvYOo?editors=0010

It seams that this issue is not resolved yet.

Inside my config object, I tried:

height: window.innerHeight,
width: window.innerWidth,
height: null,
width: null,
height: document.getElementById("myDiv").offsetHeight,
width: document.getElementById("myDiv").offsetWidth,

But I got the same wrong result…
May be the problem is the color intensity legend type??

Have you tried

modeBarButtonsToAdd: [{
    name: 'toImage2',
    icon: Plotly.Icons.camera,
    click: function(gd) {
      Plotly.downloadImage(gd)
    }
  }]

block to add a new download button?