Black Lives Matter. Please consider donating to Black Girls Code today.

Snapshot png with html <base> tag

Hi All.

Please access this CodePen, Zoom up chart and Click “Download plot as a png”.
The “newplot.png” is drawed line outside of chart area.
That code is only added <base> tag to the Original Example.
How can I solve this issue?

This is newplot.png

And below image is in browser display.

Regards,

Use the following plotly.newPlot and click on the right-hand side button I created. The default button is glitchy so it is better to formally define the width and height of the snapshot. You can rearrange the icons if you want.

Plotly.newPlot(‘myDiv’, data, layout,{modeBarButtonsToAdd: [{
name: ‘Download graph to png file’,
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: ‘Data graphs’,
format: ‘png’,
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}]});