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

admin管理员组

文章数量:1405504

I have some bar charts on react with reCharts:

/

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

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

I use those ponents 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?

I have some bar charts on react with reCharts:

http://recharts/

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

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

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

I use those ponents 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?

• javascript
• css
• reactjs
• recharts

Share Follow edited May 4, 2018 at 1:39 jedeen 19822 silver badges88 bronze badges asked Dec 5, 2017 at 1:34 Pablo EstradaPablo Estrada 3,48244 gold badges3434 silver badges8383 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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> ponent inside of your <Print> ponent. This will disable the animation.

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

本文标签： javascriptRechart Bars not displaying on Print Preview with ReactResponsiveStack Overflow