How to configure Highchart Exporting in React?

[clint_milner]

Using jQuery I've implemented the chart export using the exporting.js module and the following code:

Code: Select all

let chart = $('my-chart-id').highcharts();
chart.exportChart({type: 'image/jpeg'});

which works well.

Now I'm migrating to React and trying to not use jQuery if I don't have to. I'm using highcharts-react-official. What is the syntax to do the chart export in React?
Does HighchartsExporting have its own named export in Highcharts?

Also, is the getSVGForExport() availble too?

Any pointers would be appreciated. Thanks.

[wojtek]

Hi clint_milner,

Firstly you have to import and initialise exporting module like that:

Code: Select all

import Highcharts from 'highcharts'
import HC_exporting from 'highcharts/modules/exporting'
import HighchartsReact from 'highcharts-react-official'

// init the module
HC_exporting(Highcharts)

// instead of import + init you could use require as:
// require('highcharts/modules/exporting')(Highcharts)
// the same applies to any other Highcharts module

In your component implementation add a trigger which will invoke the function where you have an access to the chart object. There you can use getSVGForExport() or exportChart() methods.

Component example implementation:

Code: Select all

import React from "react";
import HighchartsReact from "highcharts-react-official";

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
    this.chart;
    this.exportChart = () => {
      this.chart.exportChart();
    };
  }
  componentDidMount() {
    this.chart = this.refs.chart.chart;
  }

  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={this.props.highcharts}
          constructorType={"chart"}
          options={this.props.options}
          ref={"chart"}
        />
        <button onClick={this.exportChart}>Export</button>
      </div>
    );
  }
}

export default Chart;

Online example:
https://codesandbox.io/s/4r57245nw7

Docs reference:
https://github.com/highcharts/highcharts-react

Kind regards.

[clint_milner]

After a little trial and error, I got this working - thank you!

The main change that I made was I created a dynamic chart reference in the constructor:

Code: Select all

constructor(props) {
        super(props);
        this.state = {};

        this.chart = React.createRef();
}

This way, I could send the dynamic reference to <HighchartsReact /> like this:

Code: Select all

<HighchartsReact 
          ref={this.chart} 
          highcharts={this.props.highcharts}
          constructorType={"chart"}
          options={this.props.options} />

And I could send the same reference to my custom export button component where the chart.exportChart() and chart.getSVGForExport() lives.

Code: Select all

<HighchartsExportMenu chart={this.chart}/>

[wojtek]

I'm glad you've solved your issues

Kind regards.

[gulshan]

This string ref and this.refs is deprecated, How can we export SVG using,createRef and useRef in React.

[mateuszkornecki]

Hello,

Welcome to our forum and thanks for reaching out to us with your question!

You can find such an example in the 'highcharts-react-official' docs, here: https://github.com/highcharts/highchart ... t-instance.

Feel free to ask any further questions!

Best regards.