React JSX Highcharts - Version 2

[whawker]

Introduces a new HOC withHighcharts to inject the Highcharts object/variant you want to use.

This allows you to use Highcharts in styled mode (style by CSS #20), or perform customisations to the Highcharts object before using it.

The withHighcharts HOC can be used at the chart component level, or at the root level of your application (like Provider from react-redux).

Example 1 - Component Level

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

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

export default withHighcharts(MyChart, Highcharts);

Example 2 - At application root

import { withHighcharts } from 'react-jsx-highcharts';
import Highcharts from 'highcharts/highstock'; // Highstock

const App = () => (
  <div>
    <Header />
    // etc
  </div>
);

export default withHighcharts(App, Highcharts);