[Resolved] Align plot with legend

plotly.js
1

I’ve been browsing the docs and haven’t been able to find a way to shift the plot to the left. My goal is to align the plot with the legend on the left.

image
image1734×468 29.3 KB

The plot was generated with the following code

var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: ‘scatter’
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: ‘scatter’
};
var data = [trace1, trace2];
var layout = {
xaxis:{visible:false}, yaxis:{visible:false}, showlegend: true,
legend: {“orientation”: “h”,},
};
// Set ‘h’ for horizontal and ‘v’ for vertical
Plotly.newPlot(‘myDiv’, data, layout);

2

Tweaking layout.maring.l should do the trick.

3

I followed your advice by changing layout.margin.l but both the plot and the legend shift.

var layout = {
  showlegend: true,
  legend: {"orientation": "h",},
  margin: { l: 100, r: 0, b: 0, t: 0, pad: 0 },
	xaxis:{visible:false},
	yaxis:{visible:false},
};

image
image1869×552 34.9 KB

var layout = {
  showlegend: true,
  legend: {"orientation": "h",},
  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
	xaxis:{visible:false},
	yaxis:{visible:false},
};

image
image1809×506 34.4 KB

4

I figured it out. I changed
xaxis: { visible: false, },
to
xaxis: { visible: false, rangemode: "nonnegative", },

and now it displays the way I wanted:

image
image.png1733×580 32 KB

The problem arose from rangemode’s default, changing that gave me the desired results.