Home

Intro

The intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component properties.

In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.

Example

<Tooltip /> component

<Tooltip padding={10} hideDelay={250} shape="square" split />

This corresponds to the Highcharts' tooltip configuration of

tooltip: {
  enabled: true, // This is assumed when component is mounted
  padding: 10,
  hideDelay: 250,
  shape: 'square',
  split: true
}

We aim to pass all configuration options using the same name, so we use Highcharts' documentation to figure out how to achieve the same with React JSX Highcharts.

Note:

The single exception to the above, is where Highcharts events are concerned. Instead of passing events as an object, we use the React convention onEventName.

Example

<SplineSeries id="my-series" data={myData} onHide={this.handleHide} onShow={this.handleShow} />

This would correspond to the Highcharts configuration

series: [{
  type: 'spline',
  id: 'my-series',
  data: myData,
  events: { hide: this.handleHide, show: this.handleShow }
}]