How to add a BarChart and other type of Charts inside the pdf.

[Kartik0899]

@EvHaus I am facing an issue while displaying the BarChart inside my pdf.... So when I am using " import ReactPDFChart from "react-pdf-charts" " this and trying to get my BarChart then Barchart is only showing the CartesianGrid, XAxis and YAxis but no values.
Below is the code with "ReactPDFChart" -

import React from "react";
import ReactPDFChart from "react-pdf-charts";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts";

const data = [
{ name: 'A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'G', uv: 3490, pv: 4300, amt: 2100 },
];

// Silence useLayoutEffect does nothing on the server warnings. These come
// from recharts but they're harmless and just clutter the console output.
const consoleError = console.error;
console.error = function (message) {
if (message?.startsWith('Warning: useLayoutEffect does nothing on the server')) return;
consoleError.apply(console, arguments);
};

const PdfBarChart = () => (
<ReactPDFChart> <BarChart data={data} width={500} height={300}> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid stroke="#ccc" strokeDasharray="3 3" /> <Bar dataKey="uv" fill="#8884d8" /> <Bar dataKey="pv" fill="#82ca9d" /> </BarChart> </ReactPDFChart>
);

export default PdfBarChart;

And when I try the same above code without "ReactPDFChart" it is giving me error like below -

htmlLayer.getElementsByClassName is not a function
TypeError: htmlLayer.getElementsByClassName is not a function
at CartesianAxis.componentDidMount (http://localhost:3000/static/js/bundle.js:144491:28)

So can anyone please guide or help me to figure this out and render the Bar and another Charts in the pdf.

[EvHaus]

Hmm, interesting. I can reproduce when using client-side rendering. If you render on the server via ReactPDF.render() then it displays the chart properly.

I'll investigate to see what might be the problem. I don't have any ideas yet.

Looks like this might be a bug with recharts or react itself. Seems that when you pass a chart to ReactDOM.renderToString() or ReactDOM.renderToStaticMarkup() the <path /> elements that should be displaying the bars aren't included in the output.

This seems to impact recharts's <Area> and <Bar> components. But <Line> works fine. 🤔

For now the only workaround I can offer is rendering the PDF via server-side (Node) APIs and not via <PDFViewer> or <PDFDownloadLink>.

[ganmor]

You need to add isAnimationActive={false} when rendering bar component in the browser

[EvHaus]

Great find @ganmor! That's exactly the problem!

---

@Kartik0899 To fix your issue, you'll need to change:

<BarChart data={data} width={500} height={300}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid stroke="#ccc" strokeDasharray="3 3" />
    <Bar dataKey="uv" fill="#8884d8" />
    <Bar dataKey="pv" fill="#82ca9d" />
</BarChart>

to

<BarChart data={data} width={500} height={300}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid stroke="#ccc" strokeDasharray="3 3" />
    <Bar isAnimationActive={false} dataKey="uv" fill="#8884d8" />
    <Bar isAnimationActive={false} dataKey="pv" fill="#82ca9d" />
</BarChart>

---

I'm not sure there's anything react-pdf-charts can do to detect this automatically, but I'll definitely update the docs to mention this.

[Kartik0899]

@EvHaus @ganmor Thank you so much for your help! Your solution ( isAnimationActive={false} ) worked perfectly for my issue, I really appreciate your time and expertise!

[github-actions]

🎉 This issue has been resolved in version 0.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀