@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
}
};