Higher Order Components

React JSX Highcharts exposes powerful Higher Order Components that allow you to create your own components that interact with the chart instance.

These are:

• withHighcharts
• provideChart
• provideAxis
• provideSeries

These components inject functions into your component via props, that allow you to interact with the Highcharts chart instance directly.

withHighcharts (version 2.0.0+)

This is the only required HOC for normal usage, this is used to inject the Highcharts global into your chart. This allows you to modify the Highcharts global with custom functionality, or use a specific import path for Highcharts - for instance to use Highcharts in "styled mode" (example)

This HOC can be used at the component level, or the application root to provide your Chart components with a Highcharts object to interact with.

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);

This HOC injects the following props:

• getHighcharts - Returns the Highcharts global, provided via with withHighcharts.

provideChart

Version 3+

Version 2 and below

provideAxis

Note A component wrapped with this HOC must be rendered with an axisId prop - referring to the id of the axis you wish to interact with.

Version 3+

Version 2 and below

provideSeries

Note A component wrapped with this HOC must be rendered with a seriesId prop - referring to the id of the series you wish to interact with.

Version 3+

Version 2 and below

Example

See the Custom Components example - taking note of the last line provideAxis(DateRangePickers)