Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

How Can I make Canvas Bigger while preserving margins

0

I am working with plotly, and cannot seem to adjust the spacing between a slider and the canvas. It seems Plotly has got it fixed to a certain value and no matter what I try I cannot change it.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div align="center">
<div id='graph_1594136673133' style="width:100%; margin:0 auto;"></div>
</div>

<script>
Plotly.newPlot("graph_1594136673133",{
data: [{"name":"trace0","type":"scatter3d","x":[0,1,2],"y":[0,0.0033329638256062166,0.320934931278511],"z":[0,-2.911478545255886E7,-3.5579767689250314E8]}],
layout: {"height":550,"width":600,"title":{"text":"Animation"},"showlegend":false,"updatemenus":[{"x":0,"y":0,"xanchor":"left","yanchor":"top","showactive":true,"direction":"left","type":"buttons","pad":{"r":10,"t":110},"buttons":[{"method":"animate","args":[null,{"mode":"immediate","fromcurrent":true,"transition":{"duration":300},"frame":{"duration":300,"redraw":true}}],"label":"Play"},{"method":"animate","args":[[null],{"mode":"immediate","transition":{"duration":0},"frame":{"duration":0,"redraw":true}}],"label":"Pause"}]}],"sliders":[{"pad":{"l":130,"t":200},"currentvalue":{"visible":true,"prefix":"Time:","xanchor":"right"},"steps":[{"method":"animate","label":"0","args":[["trace0"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},{"method":"animate","label":"1","args":[["trace1"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},{"method":"animate","label":"2","args":[["trace2"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]}]}]},
frames: [{"name":"trace0","data":[{"name":"trace0","type":"scatter3d","x":[0,1,2],"y":[0,0.0033329638256062166,0.320934931278511],"z":[0,-2.911478545255886E7,-3.5579767689250314E8]}]},{"name":"trace1","data":[{"name":"trace1","type":"scatter3d","x":[0,1,2],"y":[0,0.17903089032671926,1.203520978749705],"z":[0,2.0488933821974453E8,-2.609144639238796E9]}]},{"name":"trace2","data":[{"name":"trace2","type":"scatter3d","x":[0,1,2],"y":[0,0.9351944684684206,1.318573499950379],"z":[0,6.611541239663061E8,-6.937241482594146E8]}]}],
});
</script>

Here is a runnable example on Codepen: Codepen

Could someone please explain how I can make it so my canvas is much bigger and takes up more of the page, while maintaining the distance from the slider?