Plotly.js: Charts don't resize appropriately for print view

[wallacedf]

Currently, if you have a fluid chart and resize the browser window, the chart will be resized correctly to fit in the new available width. That is working fine. However, the same does not happen when you try to print that chart.

The easiest way to reproduce the issue is looking at the official response fluid chart example: https://plot.ly/javascript/responsive-fluid-layout/

If you try to print the page, you'll notice that the chart is cut off. The window.resize() function is actually called but, for some reason, it looks like the chart still reflects the width of the normal browser window rather than the width of the print view:

http://codepen.io/anon/pen/vyoBrW

Could you please check this issue?

[etpinard]

not happen when you try to print that chart.

Ha. I'm surprised that any plotly graphs are displayed properly when printed.

I'd recommend exporting your plotly graphs as images either using the snapshot mode bar button or Plotly.toImage for better -- officially supported -- results.

[etpinard]

Actually, (if I understand correctly) this has nothing to do with the fluid layout logic.

<crtl-p> on https://plot.ly/javascript/ gives:

[czellweg]

I'd recommend exporting your plotly graphs as images either using the snapshot mode bar button or Plotly.toImage for better -- officially supported -- results.

When the snapshot mode bar button is used, the generated image seems to have the default dimensions (700x450px) - regardless of how wide the actually displayed graph in the browser (before taking the snapshot) is.

This is what the browser shows:

This is the generated image (snapshot button):

Wouldn't it be possible to calculate the width/height of the div.svg-container and set those values?

[etpinard]

@czellweg see https://github.com/plotly/plotly.js/issues/1576

[romanseidl]

So plotly charts are not really printable? This is a major issue.

And no, an image won't solve this, an image is nothing that should be considered when you have svg. Also a printable image would have to be 300dpi+ in resolution. What you seen on screen is not what is to be seen on paper.

[etpinard]

So plotly charts are not really printable?

It should work fine once you set layout.width and layout.height.

[craigdrayton]

I was able to solve this with the following:

/* params divId & chartNode */
// Resize the chart if the window size changes
  window.addEventListener('resize', () => {
    const chartDiv = $(`#${divId}`);
    Plotly.relayout(chartNode, { width: chartDiv.width(), height: chartDiv.height() });
  });

  // Resize Plotly charts for printing
  const resizeChartWidth = () => {
    const chartDiv = $(\`#${divId}\`);
    Plotly.relayout(chartNode, { width: chartDiv.width() });
  };

  if (window.matchMedia) { // Webkit
    window.matchMedia('print').addListener((print) => {
      if (print.matches) {
        resizeChartWidth();
      }
    });
  }

  window.onbeforeprint = resizeChartWidth; // FF, IE

[romanseidl]

I had a look at the code for relayout and it seems to depend on the chart and its elements if it is synchronous or asynchronous. And this trick supposedly only works with synchronous calls.

But I'll validate that and report the results.

[RickAhlf]

Has there been any progress on this issue? I am running into a similar problem when attempting to print dcc.Graph components sized by viewport units. The print preview does not seem to respect any custom CSS that attempts to redefine the height and width of the components for @media print queries.

@craigdrayton your solution looks promising. Could you clarify what exactly chartNode is? It looks like divId is a prop of the plotly.js library according to the docs, but I don't see anything referencing chartNode unless it is user-defined in your implemented solution...

[antoinerg]

Here's a Codepen demonstrating the solution proposed in https://github.com/plotly/plotly.js/issues/1275#issuecomment-334912174 . It works well on Chromium.

@etpinard I think we should handle this automatically when config: {responsive: true} to enable printing.

[antoinerg]

One challenge would be to test that solution in an automated fashion. For example, we would have to make sure we resize the figures back to their original sizes when closing the print dialog.

[AnastasiyaDemi]

Is there any progress on this feature?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.