I want to create pdf using react-pdf ,but for charts/graphs i have to use Chart.js or recharts ,but directly i can not implement into react-pdf , another option i have seen from a qs: How to add recharts to react-pdf
but here html-to-image( const response = await htmlToImage.toPng(myId) ) uses but I can not find out how to put that html for docoument.getElementById() and where to put that,
I expect to put chart/graph in my created react-pdf pages,In any way. here html-to-image( const response = await htmlToImage.toPng(myId) ) uses but I can not find out how to put that html for docoument.getElementById() and where to put that,
To add charts/graphs to your
react-pdf
document, you can convert your chart to an image and then add it to the PDF using anImage
tag.Here's how you can do it:
Step 1: Install the
chartjs-to-image
packageYou can use either
chartjs-to-image
orchartjs-node-canvas
to convert your chart to an image. I prefer to usechartjs-to-image
because I use Next.js + webpack andchartjs-node-canvas
doesn't support it.npm install chartjs-to-image
Step 2: Convert your chart to a base64 image
In this example, we're creating a bar chart using
ChartJsImage
, setting its configuration, and then converting it to a base64 image usingtoDataUrl()
. We then set theimageSrc
state to the base64 string so that we can use it in theImage
tag.