ResponsiveContainer does not resize before printing

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.

[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;
      }
    }

[tuan-nguyen-van]

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 */
    }
}