take into account the size of the container when rendering a PNG of the image

[chriddyp]

plotly.js won't take into the size of the container when rendering an image (plotly/plotly.js#1576) and almost all dash app's graphs are going to be in responsive containers with dynamic sizes.

so, we should add a workaround to dcc.Graph to override the download png behaviour so that the graph is properly sized.

originally reported in https://community.plot.ly/t/save-plot-as-png-sizing-and-positioning/10166

[ijustmadethisforplotly]

Is there any progress on this?

[nicolaskruchten]

@etpinard could we add a flag to downloadImage that implements this behaviour, and then Dash could set that flag via toImageButtonOptions by default ?

[dawehner]

I implemented my own download button, which gets the size of the dom element:

export default {
  name: 'toImage2',
  title: gd => {
    return 'Download plot as a png';
  },
  icon: Plotly.Icons.camera,
  click: gd => {
    gd.layout.width = gd.offsetWidth;
    gd.layout.height = gd.offsetHeight;

    Plotly.downloadImage(gd);
  },
};

[ijustmadethisforplotly]

Is it possible to implement this on py.plotly?
If so how?

[ijustmadethisforplotly]

@dawehner can this be applied in plotly.py

[dawehner]

@ijustmadethisforplotly I don't know, I'm not using py.plotly. We use using the plotly JS library directly.

[nicolaskruchten]

This is now possible via configs: plotly/plotly.js#3746