Rechart: Bars not displaying on Print Preview with React-Responsive

Question

I have some bar charts on react with reCharts:

http://recharts.org/

Im trying to adjust the width of the char by using react-responsive:

https://www.npmjs.com/package/react-responsive

const Print = props => <Responsive {...props} query="print" />;
const Desktop = props => <Responsive {...props} minWidth={1224} />;

I use those components to identify if Im on print mode and render the BarChart with a different width:

Like this:

return (
    <div className="question">
        <div className="question-container">
            <Desktop>
                <div className="question__title-container">
                    <h2 className="question__title">
                        <span className="question__title question__title--ordinal">{ordinal}</span>
                        {questionName}
                    </h2>
                    <div className="question__legend-container">
                        <div className="question__legend-container-text">
                            <span className="question__legend-container question__legend-title">
                                RESULTADOS
                            </span>
                            <span className="question__legend-container question__legend-count">
                                {count}
                            </span>
                        </div>
                        <div className="question__legend-container-color-blue">

                        </div>
                    </div>

                </div>
                <BarChart maxBarSize={1650} barGap={10} width={1700} height={barHeight} layout="vertical" data={rows}
                          margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                    <Tooltip/>
                    <XAxis type="number" />
                    <YAxis  fontSize={12} axisLine={false} tickLine={false} width={400} dataKey="name" type="category"/>
                    <Bar  minPointSize={10} label={{ fill: '#979797', fontSize: 20, position: "right" }} dataKey="result" fill="#00a0dc" />
                </BarChart>
            </Desktop>
            <Print>
                <div className="question__title-container">
                    <h2 className="question__title">
                        <span className="question__title question__title--ordinal">{ordinal}</span>
                        {questionName}
                    </h2>
                    <div className="question__legend-container">
                        <div className="question__legend-container-text">
                            <span className="question__legend-container question__legend-title">
                                RESULTADOS
                            </span>
                            <span className="question__legend-container question__legend-count">
                                {count}
                            </span>
                        </div>
                        <div className="question__legend-container-color-blue">

                        </div>
                    </div>

                </div>
                <BarChart maxBarSize={800} barGap={10} width={800} height={barHeight} layout="vertical" data={rows}
                          margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                    <Tooltip/>
                    <XAxis type="number" />
                    <YAxis  fontSize={12} axisLine={false} tickLine={false} width={400} dataKey="name" type="category"/>
                    <Bar  minPointSize={10} label={{ fill: '#979797', fontSize: 20, position: "right" }} dataKey="result" fill="#00a0dc" />
                </BarChart>
            </Print>

        </div>
    </div>
)

The chart renders perfectly on the browser. But when I use the print preview mode I cannot see the bars.

Does anyone know why this happens and how can I fix this issue?

Answer 1

The reason that the bars aren't visible in the print preview is that they are animated and rendered within an SVG. Animations in an SVG do not start if a page is printed. Instead, the initial state of the animation is rendered.

In Recharts, the bars are animated by default; they start at a height of 0 and then extend to match the data they are representing. Since the animation doesn't render on print, we only see the start where the bars have no height.

To render the bars in the print preview, you can add the prop isAnimationActive={false} to the <Bar> component inside of your <Print> component. This will disable the animation.

(http://recharts.org/en-US/api/Bar#isAnimationActive)