react-jsx-highstock

This package exposes everything from react-jsx-highcharts, but additionally provides components for building Highstock charts.

N.B. You can build both Highcharts and Highstock charts from this package.

Why React JSX Highstock?

Unlike other React Highcharts wrapper libraries, React JSX Highcharts is designed to be dynamic - it is optimised for interactive charts that need to adapt to business logic in your React application.

Other Highcharts wrappers completely destroy and recreate the chart when the configuration options change, which is very wasteful and inefficient.

React JSX Highcharts uses a different approach, by providing React components for each Highcharts component, we can observe exactly which prop has changed and call the optimal Highcharts method behind the scenes.

For example, if the data prop were to change on a <Series /> component, React JSX Highcharts can follow Highcharts best practices and use the setData method rather than the more expensive update.

React JSX Highcharts also enables you to write your own Highcharts components, via it's powerful higher order components.

Upgrading from 2.x to 3.x

For the vast majority of cases, if your chart works in v2 of React JSX Highstock it should work in v3 without any required changes.

Ok, so what about the minority of cases?

Dropped React 15 support

v3 is built on top of the new Context API added in React 16.3, using the fantastic create-react-context polyfill for previous React 16 versions.

While polyfills for React 15 exist, I want to minimise the amount of use cases supported, going forward.

Updates to the Higher Order components (Providers)

This is an advanced feature, but if this impacts you, see the guide here

Upgrading from 1.x to 2.x

See the guide here

Changelog

As of 2.1.0 Highcharts 6 is supported

As of 2.x you are required to use the withHighcharts HOC to inject the Highcharts object (see below)

As of 1.2.0 React JSX Highstock supports using Immutable.js data structures as Series data.

Example

render () {
  return (
    <HighchartsStockChart>
      <Chart onClick={this.handleClick} zoomType="x" />

      <Title>Highstocks Example</Title>

      <Legend>
        <Legend.Title>Key</Legend.Title>
      </Legend>

      <RangeSelector>
        <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
        <RangeSelector.Button count={7} type="day">7d</RangeSelector.Button>
        <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
        <RangeSelector.Button type="all">All</RangeSelector.Button>
        <RangeSelector.Input boxBorderColor="#7cb5ec" />
      </RangeSelector>

      <Tooltip />

      <XAxis>
        <XAxis.Title>Time</XAxis.Title>
      </XAxis>

      <YAxis>
        <YAxis.Title>Price</YAxis.Title>
        <AreaSplineSeries id="profit" name="Profit" data={data1} />
      </YAxis>

      <YAxis opposite>
        <YAxis.Title>Social Buzz</YAxis.Title>
        <SplineSeries id="twitter" name="Twitter mentions" data={data2} />
      </YAxis>

      <Navigator>
        <Navigator.Series seriesId="profit" />
        <Navigator.Series seriesId="twitter" />
      </Navigator>
    </HighchartsStockChart>
    );
}

// Provide Highcharts object for library to interact with
export default withHighcharts(MyComponent, Highcharts);

More info

See here