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
Comments
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. 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. 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) |
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
|
@iamvanja yes that is kind of a workaround but I see two issues:
|
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? |
@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. |
@RevoluPowered Did you end up building your own |
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. |
+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: |
@xile611 if the |
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.
The text was updated successfully, but these errors were encountered: