2.0.0

Version 2 is here!

This is a major version bump, so of course there are...

Breaking changes

withHighcharts HOC introduced, which is required

Issue #20 highlighted the need to support Highcharts in "styled" mode, which presented a few challenges with the existing NPM module dependency structure.

Therefore we now have a new higher order component withHighcharts which allows you to inject your own Highcharts global.

This means we can simplify the peer-dependencies and make all the NPM packages only need to require highcharts.

So if you're using the Highstock package - react-jsx-highstock - instead of requiring a peer dependency of highstock-release, we can now use highcharts instead.

react-jsx-highcharts

• Minimal changes excepting requiring withHighcharts to inject the Highcharts global

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 global

react-jsx-highstock

• Requires withHighcharts, as above
• Requires the peer-dependency highcharts instead of highstock-release
• This means you import Highstock using...

import { withHighcharts, HighchartsStockChart, Chart, /* etc... */ } from 'react-jsx-highstock';
import Highcharts from 'highcharts/highstock';
const MyChart = () => (
  <HighchartsStockChart>
    <Chart />
    // etc
  </HighchartsStockChart>
);
export default withHighcharts(MyChart, Highcharts); // Injecting the Highstock global

All this means we can add...

New features!

Support for Highcharts in styled mode (Highcharts styled by CSS)

As documented in Highcharts itself, Highcharts in styled mode requires a slightly different Highcharts import path

import Highcharts from 'highcharts/js/highcharts'; // Highcharts in styled mode
// or
import Highcharts from 'highcharts/js/highstock'; // Highstock in styled mode

See the example