Skip to content
Highcharts built with proper React components
Branch: master
Clone or download
Latest commit 6937005 Feb 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
packages react-jsx-highmaps 1.2.0 Feb 18, 2019
.editorconfig
.eslintrc Add eslint rule prefer-object-spread to warn about Object.assign Oct 19, 2018
.gitattributes
.gitignore Prevent gitignore of react-jsx-highcharts README Oct 19, 2018
.travis.yml Use the correct npm command... Oct 28, 2018
ISSUE_TEMPLATE.md
LICENSE Initial commit May 21, 2017
README.md
index.html

README.md

React JSX Highcharts

Build Status

Highcharts built with proper React components. More that just a simple wrapper - utilises the power of React props to create dynamic charts!

React JSX Highcharts offers separate packages for each Highcharts product.

Highcharts
Highstock
Highmaps

Why React JSX Highcharts?

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 its powerful higher order components.

Installation

# Install the appropriate React JSX package
npm install --save react-jsx-highcharts
#               or react-jsx-highstock
#               or react-jsx-highmaps

# And the peer dependencies
npm install --save react react-dom prop-types highcharts@^7.0.0

Licensing

React JSX Highcharts is free to use, however Highcharts itself requires a license for commercial use. Highcharts license FAQs.

Documentation

Examples

Getting started

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 props.

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:

There are two exceptions to the above;

Exception 1

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 }
}]

Exception 2

text configuration options are passed as a React child

Example

<Title>Some Text Here</Title>

This would correspond to the Highcharts configuration

title: {
  text: 'Some Text Here'
}

Acknowledgements

Thanks to Recharts for the inspiration of building charts with separate components.

Thanks to Highcharts themselves, obviously.

Thanks to @anajavi for all the help and support in maintaining this project.

You can’t perform that action at this time.