Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ResponsiveContainer does not resize before printing #1114

Open
iamvanja opened this issue Dec 27, 2017 · 6 comments

Comments

@iamvanja
Copy link

@iamvanja iamvanja commented Dec 27, 2017

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
screen shot 2017-12-26 at 20 51 27

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

This comment has been minimized.

Copy link
Author

@iamvanja iamvanja commented Dec 27, 2017

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

This comment has been minimized.

Copy link

@smashmiek smashmiek commented Jul 26, 2018

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

This comment has been minimized.

Copy link

@fllprbt fllprbt commented May 8, 2019

@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

This comment has been minimized.

Copy link

@RevoluPowered RevoluPowered commented May 31, 2019

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

This comment has been minimized.

Copy link

@fllprbt fllprbt commented May 31, 2019

@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

This comment has been minimized.

Copy link

@coreysnyder coreysnyder commented Oct 14, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.