CODEWITHSUNDEEP
javascripthighchartsreact-highcharts
Lizzal
Lizzal

Reputation: 119

HighchartsReact download chart to PNG/SVG/IMG from js code

I'm trying to use Highcharts React to export the chart as any kind of image (jpg, png, svg..).

I've read, that Highcharts-React creates another instance for exporting. So there's no getSVG() function on the Highcharts Ref.

Is there any way to get the image via code?

const App = () => {
  const chartComponent = useRef(null);

  const printChartAsImage = () => {
    // chart to image
    const chart = chartComponent.current.chart;
    console.log(chart.getSVG());
  };

  return (
    <>
      <button onClick={printChartAsImage}>Print visible page</button>
      <div id="element-to-print">
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
          ref={chartComponent}
        />
      </div>
    </>
  );
};

Upvotes: 0

Views: 1911

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You are missing the Highcharts exporting module:

import Highcharts from "highcharts";
import exportingModule from "highcharts/modules/exporting";

exportingModule(Highcharts);

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

Docs: https://www.highcharts.com/docs/export-module/export-module-overview

Upvotes: 3

Related Questions