Upgrading from 1.x to 2.x

React JSX Highcharts now requires the withHighcharts higher order component to render your chart components. This HOC allows you to inject the Highcharts object the library will interact with. This means we can use Highcharts in styled mode (style by CSS) - see example, or perform customisations to the Highcharts object before using it.

Using 1.x your code would have looked something like

import { HighchartsChart, Chart, /* etc... */ } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';

const MyChart = () => (
  <HighchartsChart>
    <Chart />
    // etc
  </HighchartsChart>
);

export default MyChart

But with 2.x you need to use withHighcharts, when exporting the component (note the last line)

import { withHighcharts, HighchartsChart, Chart, /* etc... */ } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';

const MyChart = () => (
  <HighchartsChart>
    <Chart />
    // etc
  </HighchartsChart>
);

export default withHighcharts(MyChart, Highcharts); // Injecting the Highcharts object