ResponsiveContainer does not resize before printing

[iamvanja]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When printing is initiated, ResponsiveContainer re-uses the chart size from the window and does not scale properly regardless of the print specific outer container (green border) and ResponsiveContainer (red border) fixed dimensions.

If the current behavior is a bug, please provide the steps to reproduce

See screenshot

What is the expected behavior?

ResponsiveContainer should resize to the specified fixed dimensions.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

1.0.0-beta.6, all browsers.

I understand printing may be out of scope of this project, but I am also hoping someone can offer a suggestion on how to solve this.
After focusing on CSS-only solution which does not work since the chart is not resized, my next solution will be to listen to print events and conditionally set fixed dimensions although this solution is pretty messy and involved.

[iamvanja]

To respond to myself here, I solved it the following way. The printing is initiated programmatically through a button. This unfortunately does not work if printing is initiated through a browser, but it is good enough for now for the project.
The handler for my button is

  onPrint () {
    this.beforePrint()
      .then(window.print)
      .then(this.afterPrint)
  }

where beforePrint is

  beforePrint () {
    const state = {
      isPrinting: true,
      chart1: {
        width: 280,
        height: 200
      },
      chart2: {
        width: 410,
        height: 300
      }
    }
    return new Promise(resolve => this.setState(state, resolve))
  }

and afterPrint is

  afterPrint () {
    this.setState(initialState)
  }

InitialState is an object with both charts dimensions being a percentage.

This approach takes advantage of the fact that javascript execution is paused when printing dialog is active. So once the dialog is gone, afterPrint is fired. Oh, and beforePrint is a promise because we are allowing React to re-render before the print is initiated. Without it, there would be the same problem like in my initial comment.
Also, please note isPrinting flag. This is used to disable chart animation. Again, without that the dimension change would be caught somewhere in the middle when the printing dialog is shown.
onbeforeprint and onafterprint events as well as the mediaMatch are buggy and are fired multiple times in different browsers.

This is a hack, but it works. It would be nice if recharts would support various events like printing (see https://api.highcharts.com/highcharts/chart.events.beforePrint)

[smashmiek]

I'm having the same issue. The ResponsiveContainer is not responding to width changes on print.

My current solution (only tested on Chrome so far) is to trigger element resize via @media print

// SCSS
.recharts-wrapper,
    .recharts-surface{
      @media print {
        width: calc(100%)!important;
      }
    }

[fllprbt]

@iamvanja yes that is kind of a workaround but I see two issues:

• We need to calculate fixed sizes.
• What about the dimensions of the rendered component in the page? The sizing changes while the preview is opened are reflected also to the original component beneath the print preview modal.

[RevoluPowered]

Hello, I am also having the same issue with an application, is this going to be fixed in ResponsiveContainer or should we implement our own responsive container in the meantime?

[fllprbt]

@RevoluPowered, in our case we just made our own WYSIWYG print preview (before the browser's builtin), with A4 paper dimensions to ensure that the components would be printed as intended. This also removes the printing issue associated with not disabling chart animations.

[coreysnyder]

@RevoluPowered Did you end up building your own ResponsiveContainer. I'm currently being asked to make all of my pages printer friendly, and it's driving me bonkers. Trying to make pages/charts look great on screen & printer is resulting in really undesirable code.

[xile611]

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.

[goodwin64]

+1, the issue is still actual

#1114 (comment) solves it partially: 1 out of 2 printing versions are with a broken layout. See the legend and sizes of the chart below:

Website:

Printing dialog attempt 1:

Printing dialog attempt 2:

[joshunger]

@xile611 if the ResponsiveContainer is set to a percentage width like 100% would it be possible to set recharts-legend-wrapper so the width is based upon the ResponsiveContainer width? Then the legends would be positioned correctly?

[4imageupload]

For me to fix this issue I added css to change the default behavior of recharts when printing. Need to fix recharts "Legend" tag as well. Tested on Chrome, Safari and Edge

@media print {
    //Recalculate width in print mode to fix the bug the graph isn't responsive when print.
    .recharts-wrapper, .recharts-surface, .recharts-legend-wrapper {
        width: 100%!important;
    }
    //Prevent recharts-legend-item have space between <svg> icon and <span> due to recalculate width: 100%
    //try width: fit-content not work on safari
    .recharts-legend-item > svg{
        width: auto!important;
        display: inline-block!important;
        right:inherit!important; /* align to left */
    }
}

[jarodsim]

For me to fix this issue I added css to change the default behavior of recharts when printing. Need to fix recharts "Legend" tag as well. Tested on Chrome, Safari and Edge

@media print {
    //Recalculate width in print mode to fix the bug the graph isn't responsive when print.
    .recharts-wrapper, .recharts-surface, .recharts-legend-wrapper {
        width: 100%!important;
    }
    //Prevent recharts-legend-item have space between <svg> icon and <span> due to recalculate width: 100%
    //try width: fit-content not work on safari
    .recharts-legend-item > svg{
        width: auto!important;
        display: inline-block!important;
        right:inherit!important; /* align to left */
    }
}

Can show the code?