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.

1 Like

@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