Package Exports

react-jsx-highstock

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-jsx-highstock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

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

Upgrading from 1.x to 2.x

React JSX Highstock 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.

Furthermore this approach allows us to simplify the peer-dependencies, so React JSX Highstock now has a peer-dependency of highcharts, rather than highstock-release

Using 1.x your code would have looked something like

import { HighchartsStockChart, Chart, /* etc... */ } from 'react-jsx-highstock';
import Highcharts from 'highstock-release';

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

export default MyChart

But with 2.x you need to

Import Highstock via highcharts (note the Highcharts import)
use withHighcharts, when exporting the component (note the last line)

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 object

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 id="price">
        <YAxis.Title>Price</YAxis.Title>
        <AreaSplineSeries id="profit" name="Profit" data={data1} />
      </YAxis>

      <YAxis id="social" 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