brammitch / recharts-to-png Goto Github PK

I am developed the project fully in class component. i want to create option to download the chart that i created with recharts but in the recharts documentation the example is only available for functional. i really need this for my class component kindly guide me how to use it on class component

This is possibly the same as #5 but the provided solution isn't working in iframes.

You can reproduce the issue with the example at:
https://codesandbox.io/s/recharts-to-png-dyy8q?from-embed

by updating dependencies to:

• react-scripts: 4.0.1
• react: 17.0.1
• react-dom": 17.0.1

That will get you to the original error as in #5

If you then modify the handleDownload implementation based on the solution in #5 to:

  const handleDownload = React.useCallback(async () => {
    // Send the chart to getPngData
    if (chart && chart.container) {
      const svg = chart.container.children[0];
      const pngData = await getPngData(svg);

      // Use FileSaver to download the PNG
      FileSaver.saveAs(pngData, "test.png");
    }
  }, [chart]);

a new error shows up: Unable to find element in cloned iframe.

These two errors match the behavior in my app under react 17.0.1.

Any thoughts?

There is no problem when you click the download button at the top of the page. But when scrolling, the downloaded image is cropped. You can see the downloaded file after scrolling in the attachment. Thanks.

It would be great if there was a way to run this in node using a virtual DOM. What do you think about implementing that? Or would you be open to a PR for it?

Thanks for the library, it nice to work with rechart. But I am facing a problem.

If I have multiple chart It doesn't work properly.
Is there a way to use multiple rechart to png image?

Hi, thank you for the great extension.

I'm trying to figure out how I can implement this on a page with variable number of mixed charts. To see the idea you can look at: https://cv-metadata-viewer.netlify.app/ or https://cv-dataset-analyzer.netlify.app/examine/en/11.0 (check tabs)

I cannot use the solution here: #3

I have an array of graph definitions and I create a number of graphs from them according to view and some prefixed data. I have AppBarChart, AppAreaChart and AppLineChart modules, which all have local handleDownload etc definitions.

This is what I've got so far (the small icon on the top left is a positioned svg which is clickable):

Problems I have:
1- I can download the first PNG, but it does not work a second time until I refresh the page. (solved see below)
2- When I click, download is called twice (thus gives warning on the browser for multiple downloads, the check on the handler is for this purpose but probably I misused it as it is not working).

A sample code is below.

export const AppAreaChart = (props: any) => {
  const { data, xKey, yKeys, seriesNames, stacked, title, subTitle } = props;
  const { langCode } = useStore();
  const [getPng, { ref: refArea, isLoading }] = useCurrentPng();
  let i = 0;

  const handleAreaDownload = useCallback(async () => {
    if (isLoading) return;
    console.log("here");
    const png = await getPng();
    if (png) {
      FileSaver.saveAs(png, cleanFn(title + "-" + subTitle + ".png"));
    }
  }, [getPng, isLoading, subTitle, title]);

  const DLIcon = () => {
    return (
      <DownloadForOfflineIcon color="secondary" onClick={handleAreaDownload} />
    );
  };

  return (
    <AutoSizer>
      {({ width, height }) => (
        <div style={{ position: "relative" }}>
          <div
            style={{ position: "absolute", top: -5, left: -5, zIndex: 99999 }}
            onClick={handleAreaDownload}
          >
            <DLIcon />
          </div>
          <AreaChart
            width={width}
            height={height}
            data={data}
            margin={{ top: 50, bottom: 0, left: 25, right: 10 }}
            ref={refArea}
          >
            <XAxis
...
          </AreaChart>
          <div
            style={{ position: "absolute", top: -5, left: -5 }}
            onClick={handleAreaDownload}
          >
            <DLIcon />
          </div>
        </div>
...

I'll appreciate any directions / ideas / solutions...
Thank you in advance...

I am trying to implement this package to download images of my charts but chart legends are being ignored while downloading Images. How to include legends in the downloaded images?

Chart:

Downloaded Image:

This makes the chart very slow, and if there is an interaction with the chart, it makes the chart not responsive for couple seconds.

Also I keep seeing these logs in the console, whenever the chart loads, or there is an interaction with the chart (zooming, using brush,...)

See the screenshot for the console debugs here

Thanks for the library.

Any reason I'm getting this error when import?
Cannot find module 'recharts-to-png' or its corresponding type declarations.

Thanks :)

This is a question rather than an issue.

How do we use this hook when we need to dynamically display a set of charts that are accessed from some back end. We would be using a map function to generate the charts in the document and as per react documentation, we should not dynamically assign userefs.

The code is something like this

import { UseCurrentPng } from 'recharts-to-png';

// how to use an array here
const [getPng, { ref, isLoading }] = useCurrentPng();
 ...
 arr.map( (chart, index) => {
      <BarChart .... ref={ref}  />
          
     </BarChart>
})
...

Thanks

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Currently troubleshooting...

Hello,
I was successfully using this library to download charts, one at a time. However, now I need to download a single PNG with multiple charts on it. The charts are rendered inside a <div> container and I just need to create a PNG out of this div.

I've noticed that the only dependency to the recharts library is this line of code where you expect ref.current.container to have a container attribute

return await html2canvas(ref.current.container as HTMLElement, {
        logging: false,
        ...options,
})

Other than this, it looks like the useCurrentPng could be made generic and used to render any element to png. Am I right?
If yes, do you think it would be worth it to remove the dependency?

TODO:

• Test recharts-to-png compatibility with Recharts 2

I have not yet had time to test if this library works with the newest version of Recharts. The project I developed this library for uses Recharts 1, and upgrading to Recharts 2 is not in our immediate roadmap.

Given that Recharts 2 was mostly about adding TypeScript, I'm hoping there are no issues.

If anyone is currently using this library with Recharts 2, does it perform as expected?

Has anyone used it with both Recharts 1 and 2?

From PNG to Base64 I am converting for adding into my application.

But the Chart is much pixelated / low quality?

Any inputs please. thanks.

"react": "^17.0.1",
"react-router-dom": "^5.2.0"

import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip as Rtooltip, XAxis, YAxis } from 'recharts'
import { getPngData } from "recharts-to-png";

<BarChart ref={ref => (this.chart = ref)} width={600} height={300} data={...} margin={{ top: 0, right: 30, left: 20, bottom: 40 }}>
  <CartesianGrid vertical={false} strokeDasharray='3 3' />
  <XAxis dataKey='name' />
  <YAxis />
  <Rtooltip content={...} />
  <Legend formatter={...} />
  <Bar
  ...
  />
  <Bar
  ...
/>

handleDownload = async () => {
console.log("this.chart",this.chart)

const pngData = await getPngData(this.chart);

react-dom.development.js:24281 Uncaught (in promise) Error: Unable to find node on an unmounted component.
    at findHostInstanceWithWarning (react-dom.development.js:24281)
    at Object.findDOMNode (react-dom.development.js:24804)
    at index.js:55
    at step (index.js:33)
    at Object.next (index.js:14)
    at index.js:8
    at new Promise (<anonymous>)
    at push../node_modules/recharts-to-png/dist/index.js.__awaiter (index.js:4)
    at getPngData (index.js:50)
    at _callee$ (Meterreading.js:55)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (99.fff86d3a9731a0734d1d.hot-update.js:41)
    at _next (99.fff86d3a9731a0734d1d.hot-update.js:43)
    at 99.fff86d3a9731a0734d1d.hot-update.js:43
    at new Promise (<anonymous>)
    at Object.onClick (99.fff86d3a9731a0734d1d.hot-update.js:43)
    at index.js:1
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at HTMLUnknownElement.sentryWrapped (helpers.js:72)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
    at HTMLDivElement.sentryWrapped (helpers.js:72)

Hello, are composed charts supported?

I have a bar and line graph inside a composed chart. After following the directions, it will only download an empty png.

Hey, thanks for the great package, one thing I noticed is when exporting the graph to JPEG (or PNG for that matter), the formatting i've done to the ticks is gone (mainly what's bothering me is the font-family)

Exported:

Original:

Do you think there's a quick way to fix this?
thanks!

A Blank image is downloaded on click of download button.