如何将 Highchart 变量饼图的图像存储到变量中并传递给 React-PDF

Question

I was wondering if someone could help me. I need to be able to pass through a PNG or SVG of my Highcharts VariablePie chart to @react-pdf/render I am using highcharts-react-official package to render my highchart in my react application.

I have react-pdf installed - https://react-pdf.org/

I have my page where my Highchart variable pie renders with other content, then a button that will download a PDF. This is created using React-PDF I somehow need to pass an Image of my Highchart VariablePie chart. I have seen posts about chart.getSVG() and base64 but how do you use this in highcharts-react-official ? could someone show me an example using functional components and hooks, and how would you convert it to a PNG and store that as a variable that I can use to pass through to react-pdf

1. List item get a image of highcharts variablepie chart (no downloading or export)
2. store as a variable in the application
3. to pass through to react-pdf

is there a way to do this? could someone help and show me an example? Thank you

Answer 1

To use chart.getSVG method in React, you need to add exporting module and get the chart component reference. For example:

import HighchartsReact from "highcharts-react-official";
// Import Highcharts
import Highcharts from "highcharts";
import HCExporting from "highcharts/modules/exporting";

HCExporting(Highcharts);

const Chart = () => {
  const chartComponent = useRef(null);
  const [options] = useState(...);

  useEffect(() => {
    const chart = chartComponent.current.chart;
    const chartSVG = chart.getSVG();

    console.log(chartSVG);  
  }, []);

  return <HighchartsReact ref={chartComponent} highcharts={Highcharts} options={options} />;
};

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-fork-bwk8nq?file=/demo.jsx

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#getSVG

Docs: https://www.npmjs.com/package/highcharts-react-official#how-to-get-a-chart-instance