Render charts in a downloadble PDF

[fabio-carvalho88]

Describe the bug

Relevant Packages:

"@react-pdf/renderer": "^3.4.2",
"@nivo/bar": "^0.84.0",
"@nivo/core": "^0.84.0",
"@nivo/geo": "^0.84.0",
"@nivo/heatmap": "^0.84.0",
"@nivo/radial-bar": "^0.84.0",
"next": "14.1.0", // Next.js
"react": "^18",

The goal is pretty clear, generate and download a PDF that has charts inside.

Calling the charts directly in my pdf template component seems to be impossible. I've tried to render them inside <View> and didn't work well.

The approach I've at the moment is passing a base64 string that represents the chart canvas and set it as the Image component's source.

but i'm getting this error:

TypeError: Cannot read properties of undefined (reading 'width')

Ignore any code optimizations, as they're meant to happen once the functionality is ok.

Thanks for your help in advance 🙏

Expected behavior Render charts images in the pdf document

Screenshots

Desktop (please complete the following information):

• OS: MacOS, Windows
• Browser: Chrome
• React-pdf version v3.4.2

[jpvalery]

Hey there,

Have you found a solution? I'm working on something similar and trying to get the SVG from nivo converted into something that react-pdf can support.

[kterto]

https://github.com/EvHaus/react-pdf-charts Have you ever seen this?

[diegomura]

EvHaus/react-pdf-charts looks promising. Charts are outside this lib scope