3

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

Abhishek Gangwar
  • 2,168
  • 18
  • 26
  • what do you mean by exporting highchart functionality from outside? – humanbean Sep 25 '19 at 12:16
  • downloading the JPEG, CSV of highchart from buttons which are outside of chart area. – Abhishek Gangwar Sep 25 '19 at 12:19
  • So basically, there is the export module of highchart, which provides us a menu button and different functionality of downloads like JPEG, SVG, PDF. I am trying to achieve the same thing but from outside of chart. Are there any events which can help me with this? – Abhishek Gangwar Sep 25 '19 at 12:22
  • Hi @abhishek gangwar, Do you use the officially supported wrapper for React? https://www.npmjs.com/package/highcharts-react-official – ppotaczek Sep 25 '19 at 14:17
  • 2
    Did you figure it out? Having the same issue right now... can't find the getCSV() method on the Chart object, even if the context button works well and download a proper csv – Yannick Oct 01 '19 at 20:22
  • @Yannick, I cannot find this method either on the chart object. How did you solve it? – Mr. Robot Jan 23 '20 at 15:27

2 Answers2

7

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();
    }
  };
Yannick
  • 1,550
  • 4
  • 18
  • 27
0

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

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