How to add export functionality to custom button in React highcharts?

Question

I have this project in which I am trying to implement export highchart functionality from out side of the chart.

Is there any way I can achieve that? I am using React highcharts and the download formats are Jpeg and CSV.

Thanks in advance

Answer 1

I found an solution using functional components:

First import the modules:

import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

Then create a ref to the chart:

  const chart = useRef();
....
....
<HighchartsReact ref={chart} highcharts={Highcharts} options={chartOptions} />

Then create a method like this one, triggered by a click event:

  const downloadCSV = () => {
    if (chart && chart.current && chart.current.chart) {
      chart.current.chart.downloadCSV();
    }
  };

Answer 2

From @Yannick response... This works for me.

const chart = useRef(null);  <-------- important
....
....
<HighchartsReact ref={chart} highcharts={Highcharts} options={chartOptions} />