---

[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]

> [!WARNING]
> Due to this limitation, this library does NOT support recharts v3+ (more info).

The problem

One of the best ways to generate PDFs is using react-pdf. Unfortunately react-pdf has several bugs (1, 2) that makes rendering SVG charts very difficult. This library attempts to ease the pain and provide a possible workaround until those bugs are fixed.

This solution

This library provides a wrapper component that allows you to use popular SVG charting libraries (like recharts) in your react-pdf PDF documents. The wrapper will convert all generated DOM elements into compatible react-pdf SVG image elements. The library will also attempt to workaround common bugs and limitations gracefully.

The outcome is that you'll be able to have PDF documents with beautiful charts like this:


Table of Contents

- Installation
- Usage
- Props
- Examples
- Known Issues
- Other Solutions
- Issues
- 🐛 Bugs
- 💡 Feature Requests
- Contributors ✨
- LICENSE

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's dependencies:

``
npm install react-pdf-charts
`

Usage

`tsx
import ReactPDFChart from "react-pdf-charts";

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

const SomeComponent = () => (









);
`

From there you can pass SomeComponent to react-pdf to be rendered either on the server or the client via its rendering APIs.

Props

$3

> boolean | defaults to false

Enables react-pdf debugging mode for the outer wrapper element.

$3

> {} | optional, some base recharts styles are applied by default

An optional Stylesheet that maps web CSS class names to whatever react-pdf styles you wish to replace those classes with.

The idea is that popular SVG charting libraries (like recharts) will apply various classes to its elements (eg. ...). Since class names aren't supported in react-pdf, this prop allows to you replace those class names with custom styling. The react-pdf-charts library will convert any matches class names to the corresponding react-pdf styles.

$3

> {} | optional, no default

An optional style that will get applied to the outer element of the wrapper component.

$3

You can check the working examples in the /examples folder.

You can re-run the examples by downloading this repository, running bun install to install dependencies, and then running bun start to re-generate the .pdf files in the examples folder.

There's also /examples/client which is a small little web server which you can use to test react-pdf's web-only APIs like PDFViewer and PDFDownloadLink. To run that example, use cd examples/client && bun install && bun start.

You can also play around with the library on StackBlitz here.

$3

- [ ] Only recharts and victory have been tested. In theory react-pdf-charts should work with others charting libraries (like highcharts) but those haven't been tested yet.
- [ ] When rendering chart elements, the boolean prop isAnimationActive defaults to {true}. If you are rendering charts with recharts using client-side rendering (ie. or ), you must set isAnimationActive={false} on your chart compoments otherwise the chart will not render correctly (more info). recharts chart components that support the isAnimationActive prop include: and . Perhaps in the future react-pdf-charts could auto-detect this and disable animations automatically.
- [ ] react-pdf does not support nested elements (more info). This means some recharts features, such as custom ReferenceDot component may not work (more info).

Other Solutions

There's this great Gist by kidroca that served as inspiration for this library, but beyond that I'm not aware of any other solutions in the react-pdf` community.

Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._

$3

Please file an issue for bugs, missing documentation, or unexpected behavior.

[See Bugs][bugs]

$3

Please file an issue to suggest new features. Vote on feature requests by adding
a 👍. This helps maintainers prioritize what to work on.

[See Feature Requests][enhancements]

Contributors ✨

Thanks goes to these people:

Ev Haus

License

MIT

[npm]: https://www.npmjs.com
[node]: https://nodejs.org
[package]: https://www.npmjs.com/package/react-pdf-charts
[npmtrends]: https://www.npmtrends.com/react-pdf-charts
[version-badge]: https://img.shields.io/npm/v/react-pdf-charts.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dm/react-pdf-charts.svg?style=flat-square
[bugs]: https://github.com/EvHaus/react-pdf-charts/issues?q=is%3Aopen+is%3Aissue+label%3Abug
[enhancements]: https://github.com/EvHaus/react-pdf-charts/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement
[good-first-issue]: https://github.com/EvHaus/react-pdf-charts/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22