What is the correct version of HighchartsReact to use with React 15.4.2?

Question

I am trying to use HighchartsReact in a SharePoint Framework (SPFx) web part for SP 2016.

Because I'm stuck in SP 2016, I am stuck using the following versions of things:

• SPFx 1.1
• Node 8.17.0
• React 15.4.2

I absolutely cannot go to a higher version of Node or React.

Which version of HighchartsReact will work with this configuration? I've tried a bunch of them, and they all throw errors.

All the major version 1 releases (1.1.0, 1.2.0, 1.3.0, 1.4.0, 1.5.2) all throw this error in React:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of MyChart

The early major version 2 releases (I tried 2.0.0 and 2.1.3 specifically) throw this error in the browser console:

Uncaught (in promise) TypeError: f.default.createRef is not a function at new t (HighchartsReact.js:6:28)

With version 2.1.0, 2.1.3 and 2.2.2 I get a Typescript error in VS Code where my <HighchartsReact /> component is red underlined and the error is apparently:

'HighchartsReact' cannot be used as a JSX component.

but 2.1.0 and 2.1.3 still build, but 2.2.2 does not.

Versions 3.0.0 and 3.1.0 throw this error in the console:

Uncaught (in promise) Error: ***The value for "error" must not be undefined

but also show a different error in the SPFx workbench UI:

Original error: Error loading https://component-id.invalid/d0f2d321-9397-4488-9d9c-346e28ab3e54_0.0.1 Object(…) is not a function

So every single version of HighchartsReact is throwing some sort of error when trying to use it with Node 8.17 and React 15.4.2.

What can I do to use it if I can't up my Node or React versions?

Answer 1

You can relatively easily create your own wrapper for a Highcharts chart in React.

For the first step please check source code of the current wrapper version: https://github.com/highcharts/highcharts-react/blob/master/src/HighchartsReact.js

All you need to do is to create HTML container for a chart, create the chart in componentDidMount and handle chart update in componentDidUpdate.

Proposed implementation for React 15.4.2:

class HighchartsReact extends React.Component {
  componentDidMount() {
    const props = this.props;
    const H = props.highcharts;
    const constructorType = props.constructorType || "chart";
    // Create chart
    this.chart = H[constructorType](this.container, props.options);
  }
  componentDidUpdate() {
    const props = this.props;
    const H = props.highcharts;
    const constructorType = props.constructorType || "chart";

    if (props.allowChartUpdate !== false) {
      if (!props.immutable && this.chart) {
        this.chart.update(props.options, ...(props.updateArgs || [true, true]));
      } else {
        this.chart = H[constructorType](this.container, props.options);
      }
    }
  }
  componentWillUnmount() {
    this.chart.destroy();
  }
  render() {
    var self = this;
    var containerProps = this.props.containerProps || {};
    // Add ref to div props
    containerProps.ref = function (container) {
      self.container = container;
    };
    // Create container for our chart
    return React.createElement("div", containerProps);
  }
}

---

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