How can I get plot to fill the canvas?

plotly.js
1

I would like my plot to fill the canvas with no padding, margins. The scatter plot should go right to the edges.

Can I do this? see: http://robertlight.com/tmp/expl.png

expl
expl.png400×650 18.1 KB

2

Simple remove all the margins.

3

i have done that…there’s still padding in the graph area…if the range of x is 0-100
the graph’s x-axis is drawn -3 to 103

If the data range of y is 0-256, the y-axis is drawn -3 to 259

…so my suspicions are that it is something about the trace more than the layout.

var layout = {
type:“scatter”,
hovermode:“closest”,
yaxis: { autorange: “reversed” } ,
autosize: false,
width: 150,
height: height,
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0
},
paper_bgcolor: ‘#7f7f7f’,
plot_bgcolor: ‘#c7c7c7’,
showlegend: false
};

4

Yes, we add padding around scatter trace markers by default.

To override that behavior, set layout.yaxis.range to [0, 256]

5

That’s getting me closer… it works for the xaxis…but not for the yaxis.

In the image below, you can see that there is still padding at the top and the bottom of the plot. The xaxis looks just fine.

plotly
plotly.png151×502 4.74 KB

6

SOLVED!!

ok… I think I have found a hint to the difficulties.

the yaxis is defined:

yaxis: { autorange: “reversed”, range: [yMin,yMax] }

I had to just reverse the data manually (ie: make the smallest y-value “0”) and then define it to be:
yaxis: { range: [0, yMax-yMin] }

Moral of the story: autorange: “reversed” adds a token padding to the top and the bottom of the graph.