Me preguntaba si alguien me podría ayudar. Necesito poder pasar un PNG o SVG de mi gráfico Highcharts VariablePie a @react-pdf/render. Estoy usando el paquete highcharts-react-official para representar mi gráfico alto en mi aplicación de reacción.
Tengo instalado react-pdf - https://react-pdf.org/
Tengo mi página donde mi gráfico circular variable de Highchart se representa con otro contenido, luego un botón que descargará un PDF. Esto se crea usando React-PDF. De alguna manera necesito pasar una imagen de mi gráfico Highchart VariablePie. He visto publicaciones sobre chart.getSVG() y base64, pero ¿cómo se usa esto en highcharts-react-official ? ¿Podría alguien mostrarme un ejemplo usando componentes funcionales y ganchos, y cómo lo convertiría a PNG y lo almacenaría como una variable que puedo usar para pasar a react-pdf?
¿Hay alguna forma de hacer esto? ¿alguien podría ayudarme y mostrarme un ejemplo? Gracias
Para usar el método chart.getSVG en React, debe agregar un módulo de exporting y obtener la referencia del componente del gráfico. Por ejemplo:
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} />; };Demostración en vivo: https://codesandbox.io/s/highcharts-react-demo-fork-bwk8nq?file=/demo.jsx
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.Chart#getSVG
Documentos: https://www.npmjs.com/package/highcharts-react-official#how-to-get-a-chart-instance