v3.0.1

Changes

A patch release to stop PlotBands and PlotLines updating unnecessarily.

Version 3!

Version 3 is here!

Massive thanks to @anajavi!

For the vast majority of cases, if your chart works in v2 of React JSX Highcharts it should work in v3 without any required changes.

What about the minority of cases then?

Breaking changes (for the minority)

Dropped React 15 support

v3 is built on top of the new Context API added in React 16.3, using the fantastic create-react-context polyfill for previous React 16 versions.

While polyfills for React 15 exist, I want to minimise the amount of use cases supported, at least until I get some help maintaining from the community 🙏

Updates to the Higher Order components (Providers)

This is an advanced feature, which few people use, but if this impacts you see the guide here

New features!

id props are no longer required

Previously, every Axis, Series, Plot Band and Plot Line required a unique id prop. This is no longer the case, in the majority of cases, the ID can be omitted and a UUID will be used instead.

Caveats: For Highstock charts with a Navigator, it will be easier to provide your series with a known id, so you can simply refer to it, i.e. <Navigator.Series seriesId="mySeries" />

Helpful error messages when an additional Highcharts module is required

In development environments, React JSX Highcharts will now raise helpful errors in the console. Letting you know which modules you likely need to add. For example...

Caveats: If you are using Highcharts styled mode, you'll need to import modules from the /js/ folder i.e. highcharts/js/highcharts-more

ES6 module builds

All credit here goes to @anajavi, thanks!!

This enables bundlers like Webpack to perform tree shaking, removing any parts of React JSX Highcharts you don't use in your application

New logo

I'm not a designer, but I tried...

2.2.1

React JSX Highstock update only

• Adds support for click events on RangeSelector buttons #79 (See Highcharts docs here)

<RangeSelector>
  <RangeSelector.Button count={1} type="day" onClick={() => alert('Clicked 1 day!')}>1d</RangeSelector.Button>
  <RangeSelector.Button count={7} type="day" onClick={() => alert('Clicked 7 days!')}>7d</RangeSelector.Button>
</RangeSelector>

2.2.0

Bug fix

• Stop events being removed when a Series is updated #77

Highcharts 6 Support

New Features

Highcharts 6 support

Long awaited support for Highcharts 6 added, see our Sankey and Stream Graph examples!

Add Reflow and Loading support

New features

Loading component

Added a <Loading /> component to display a message while awaiting for some task to complete (#30). See example

Reflow (via callback)

Added support for reflow via a new callback prop (#43). See example

The callback prop expects a function, which will be called with the Highcharts chart object once the chart is created.

Example

getChart = chart => {
  this.chart = chart;
}

render () {
  return (
    <HighchartsChart callback={this.getChart}>
      // omitted...
    </HighchartsChart>
  );
}

Reflow could then be achieved by adding a function which interacts with the chart object directly.

// Extending the above example
resize = () => {
  this.chart.reflow();
}

This pattern could also be used to utilize Highcharts features not yet supported by React JSX Highcharts, like printing or exporting.

2.0.2 & 1.4.2

Bug fix release.

• <Chart /> component not updating when props changed #45
• <RangeSelector.Input /> boxes were not clickable #40

These fixes have also been back ported to the 1.x version as 1.4.2

2.0.1 & 1.4.1

Bug Fix

Fix #38 - Fixes an issue where unmounting an axis did not remove the axis properly from the chart.

2.0.0

Version 2 is here!

This is a major version bump, so of course there are...

Breaking changes

withHighcharts HOC introduced, which is required

Issue #20 highlighted the need to support Highcharts in "styled" mode, which presented a few challenges with the existing NPM module dependency structure.

Therefore we now have a new higher order component withHighcharts which allows you to inject your own Highcharts global.

This means we can simplify the peer-dependencies and make all the NPM packages only need to require highcharts.

So if you're using the Highstock package - react-jsx-highstock - instead of requiring a peer dependency of highstock-release, we can now use highcharts instead.

react-jsx-highcharts

• Minimal changes excepting requiring withHighcharts to inject the Highcharts global

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

react-jsx-highstock

• Requires withHighcharts, as above
• Requires the peer-dependency highcharts instead of highstock-release
• This means you import Highstock using...

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

All this means we can add...

New features!

Support for Highcharts in styled mode (Highcharts styled by CSS)

As documented in Highcharts itself, Highcharts in styled mode requires a slightly different Highcharts import path

import Highcharts from 'highcharts/js/highcharts'; // Highcharts in styled mode
// or
import Highcharts from 'highcharts/js/highstock'; // Highstock in styled mode

See the example

1.4.0

New Features

React 16 support

As Fiber supports rendering arrays we can stop rendering junk hidden wrapper divs! Yay!

Custom className

The root <HighchartsChart /> / <HighchartsStockChart /> now accept a className prop. Thanks @will-stone!

Bug fixes

Fixed an error when unmounting a Stock chart with a navigator, event handlers on the document object were not removed (#32)