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
is there a way to do this? could someone help and show me an example? Thank you
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