Render recharts svg chart inside a PDF document created with react-pdf/renderer

Chart.jsx

import React from 'react';
import { Global } from 'recharts';

import { htmlSvgToPdfSvg } from '../imageFromSvg';

export const ChartSvg = ({ debug, style, children, width, height }) => {
  return chartToPdfSvg(children, width, height, debug, style);
};

const chartToPdfSvg = (children, width, height, debug, style) => {
  Global.set('isSsr', true);
  const component = htmlSvgToPdfSvg(children);
  Global.set('isSsr', false);

  const result = React.cloneElement(component, { width, height, debug, style });
  return result;
};

export default ChartSvg;

ExampleUsage.jsx

import { View } from '@react-pdf/renderer';
import { CartesianGrid, Label, Scatter, ScatterChart, XAxis, YAxis } from 'recharts';

import Chart from './Chart';

export const ExampleUsage = ({ data = getSampleData() }) => (
  <View>
    <Chart width={600} height={300}>
      <MyRechartsChart data={data} />
    </Chart>
  </View>
);

const MyRechartsChart = ({ width, height, data }) => (
  <ScatterChart width={width} height={height}>
    <CartesianGrid />
    <XAxis name="x" dataKey="x" />
    <YAxis name="y" dataKey="y" />
    <Scatter name="My Scatter" data={data} isAnimationActive={false} />
  </ScatterChart>
)

function getSampleData() {
  return [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 200, y: 150 },
    { x: 150, y: 200 },
    { x: 125, y: 150 }
  ]
}

export default ExampleUsage;

imageFromSvg.js

import React, { createElement } from 'react';
import ReactDom from 'react-dom/server';
import reactHtmlParser from 'react-html-parser';

export const htmlSvgToPdfSvg = (children) => {
  const svgString = ReactDom
    .renderToStaticMarkup(children)
    .replaceAll('px', 'pt');

  const [component] = reactHtmlParser(svgString, { transform: convertToPdfSvg });
  return component;
};

function convertToPdfSvg(node, index) {
  if (node.type == 'text') {
    return node.data;
  }

  node.props = { key: index };

  Object.entries(node.attribs).forEach(([key, value]) => {
    const [first, ...rest] = key.split('-');

    const newKey = [first, ...rest.map(word => `${word[0].toUpperCase()}${word.slice(1)}`)].join('');
    node.props[newKey] = value;
  });

  node.name = node.name?.toUpperCase();
  if (node.name == 'CLIPPATH') node.name = 'CLIP_PATH';

  // we're removing nested <defs> because they don't work
  if (node.name == 'DEFS' && node.parent.name != 'SVG') return null;

  if (node.children) node.children = node.children.map(convertToPdfSvg);
  return createElement(node.name, node.props, node.children);
}

export default htmlSvgToPdfSvg;

package.json

{
  "dependencies": {
    "@react-pdf/renderer": "^2.0.16",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-html-parser": "^2.0.2",
    "recharts": "^2.0.9"
  }
}

@Kartik0899 Could you please open a new issue at https://github.com/EvHaus/react-pdf-charts/issues and we can take it from there.

BarChart doesn't work properly, ni the PieChart

BarChart doesn't work properly, ni the PieChart

@omarhsounalogient

You need to add isAnimationActive={false} when rendering BarChart and PieChart component in the browser.
For example -
<Bar isAnimationActive={false} dataKey="uv" fill="#8884d8" />
<Pie isAnimationActive={false} dataKey="value" nameKey="name" cx="25%" cy="50%" outerRadius={50} fill="#000" label />

Hope it helps!

I'm having the same issue with renderFn. Anyone figure this out?

I degraded the version react-pdf ,and it worked

BarChart doesn't work properly, ni the PieChart

@omarhsounalogient

You need to add isAnimationActive={false} when rendering BarChart and PieChart component in the browser. For example - <Bar isAnimationActive={false} dataKey="uv" fill="#8884d8" /> <Pie isAnimationActive={false} dataKey="value" nameKey="name" cx="25%" cy="50%" outerRadius={50} fill="#000" label />

Hope it helps!

You save my life, after like 4 hours with this issue your advice work