Skip to content

Highcharts or Highstock?

Will Hawker edited this page Oct 17, 2017 · 2 revisions

The question is, do you need stock charts?

If no, use the react-jsx-highcharts package, this includes only Highcharts components. It has a peer dependency on highcharts.

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

If yes, use the react-jsx-highstock package, this includes both Highcharts components and Highstock components. It also has a peer dependency on highcharts. Except you should import the Highcharts module using highcharts/highstock.

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

react-jsx-highstock exposes everything in the react-jsx-highcharts package, so allow you to build both types of charts.