Version 4!

Version 4 is a rewrite of the libraries using React hooks.

What's new in version 4:

• React re-render performance should be improved
• Full bundle size is around 25% smaller
• React DevTools shows a shallower tree which eases debugging

If you're already using React >= 16.8.6 chances are you will not need to make changes to your code, as the External API has not changed, but there are some breaking changes.

Breaking changes

Requires React 16.8.6 or higher

For React Hooks support

Requires Highcharts 8.0.0 or higher

ImmutableJS data structures are no longer supported

As Immutable itself is no longer maintained

Props are now shallow compared instead of version 3's deep equal checks.

This should make little difference, but you may find components are needlessly re-rendering if using bad practices like creating new objects or arrays on every render

/*
Bad practice - Here a new array is created on every render
These are not equal (in the JavaScript sense of object references) between two renders
*/
<LineSeries name='My series' data={[ 1, 2, 3, 4, 5 ]} /> 

/* Better practice */
const [data, setData] = useState([ 1, 2, 3, 4, 5 ])
<LineSeries name='My series' data={data} />

If you find this problematic, you can pass an isDataEqual prop to override this behaviour.

This is a function that takes two arguments - the current data and the previous data, and returns a boolean.

(data, prevData) => boolean
                 => TRUE  - data is equal and should not cause a re-render
                 => FALSE - data is NOT equal and SHOULD cause a re-render

You can restore the old behaviour by passing Lodash's isEqual via the isDataEqual prop.

import isEqual from 'lodash/isEqual'

<LineSeries name='My series' data={[ 1, 2, 3, 4, 5 ]} isDataEqual={isEqual} />

IE10 is no longer supported

Because it only has 1.5% global usage, and it's not worth our time.

IE11 is supported, but needs to be polyfilled to at least ES2015 level

You are probably already doing this with core-js.

If you are using create-react-app, please see this guide

The Higher Order components have been replaced by Hooks

This should not affect many users, these were an advanced feature for writing your own components

Higher order component	Hook
provideHighcharts	useHighcharts
provideChart	useChart
provideAxis	useAxis
provideSeries	useSeries

The old Higher Order components injected a prop, (i.e. getChart) into your component, a function that returned an object.
The hooks work slightly differently - they directly return the object instead. This object is the same shape as before.

New features

Adds a Caption component for setting Chart captions

<Caption>
  This is a caption.
</Caption>

Adds support for Color Axes via the ColorAxis component

<ColorAxis id="myColorAxis" min={0} max={30}>
  <ColumnSeries .../>
</ColorAxis>

Hooks for extending the library

The library exposes several hooks for creating your own components, these are

• useHighcharts
• useChart
• useAxis
• useSeries
• usePlotBandLine

Acknowledgements

This version literally would not have happened without @anajavi, who puts hours of their own time into the rewrite. I cannot thank you enough! Thank you so much @anajavi!

Version 4 - Alpha 1

Version 4 is a rewrite of the libraries using React hooks.

What's new in version 4:

• React rerender performance should be improved
• Full bundle size is around 25% smaller
• React devtools shows shallower tree which eases debugging

Most of the time upgrade to version 4 should go without changes to the code, but there are some breaking changes. If you are having problems with upgrade, be feed back via this issue

Breaking changes

• Requires React 16.8.6 or higher
• Requires Highcharts 7.2.0 or higher
• Drops support for immutable-js
• Props are now shallow compared instead of version 3's deep equal checks.
  • Be sure you are not placing new objects or arrays to props, otherwise the components will rerender needlessly
• Minimum supported version of IE is 11
  • IE needs to be polyfilled to at least ES2015 level, which you are probably already doing with core-js. If you are using create-react-app, please see https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill#user-content-polyfilling-other-language-features

These should not affect many users:

• provide methods are replaced with hooks:
  • provideHighcharts --> useHighcharts
  • provideChart --> useChart
  • provideAxis --> useAxis
  • provideSeries --> useSeries
• Values in Contexts are changed from functions to objects

New features

• Caption component for setting chart caption

<Caption>
  This is a caption.
</Caption>

• Hooks for extending the library

v3.6.0 Highcharts 7.1

New Features

Highcharts 7.1

New series types

• OrganizationSeries
• ItemSeries
• DependencyWheelSeries - Example
• TimelineSeries
• 3DPyramidSeries
• 3DFunnelSeries

provideChart exposes chart.setSize(width, height)

The provideChart HOC now exposes the setSize function

Dependency warnings

React JSX Highcharts will try to inform you of all the modules you need for the required series type (when NODE_ENV=development)

Dependencies updated

• Now using mini-create-react-context instead of create-react-context under the hood to reduce the bundle size.

Bug fixes

#209 - Now using requestAnimationFrame to debounce redraws, rather than lodash's debounce
#210 - DelayRender should catch remaining cases where setState was called after unmount

Acknowledgements

@anajavi as always - cheers for the ongoing support, much appreciated!

Custom providers

Exposed context

This new version adds niche functionality, allowing users to create their own HOCs.

The library now exposes the React contexts used internally, they all have a Provider and Consumer property.

• HighchartsContext
• HighchartsChartContext
• HighchartsAxisContext
• HighchartsSeriesContext

See #204

v3.4.0 Highcharts 7 and Annotations support

New features

Highcharts 7 support

N.B. The following only applies if you update your code to Highcharts 7, which was recently released. If using Highcharts 5 or 6, you should be unaffected by the changes below.

Changes to Style by CSS

Highcharts 7 changes the way styled mode works, it is now controlled by a chart.styledMode option

If you update to Highcharts v7 and are using styled mode (style by CSS) you will need to;

1. Change the path you use to import Highcharts
2. Add the new styledMode prop to your HighchartsChart root component

Previously Highcharts 6

import Highcharts from 'highcharts/js/highcharts' // <-- note /js/highcharts path
import { HighchartsChart, withHighcharts, /* etc... */ } from 'react-jsx-highcharts'

const MyChart = () => (
  <HighchartsChart>
    // omitted
  </HighchartsChart>
)

export default withHighcharts(MyChart, Highcharts)

With Highcharts 7

import Highcharts from 'highcharts' // <-- note normal highcharts path
import { HighchartsChart, withHighcharts, /* etc... */ } from 'react-jsx-highcharts'

const MyChart = () => (
  <HighchartsChart styledMode> {/* <-- New React JSX Highcharts feature to enable CSS styling */}
    // omitted
  </HighchartsChart>
)

export default withHighcharts(MyChart, Highcharts)

New series types

This release adds support for the new series types introduced by Highcharts 7

• ColumnPyramidSeries
• CylinderSeries
• NetworkGraphSeries
• PackedBubbleSeries
• VennSeries

For further information see #194

Annotations support

This release adds a new Annotation component, which enables you to highlight important features in your chart data.

Example here

For further information see #190

Optimisations

This release includes a load of work by @anajavi to reduce initial load times, and reduce the bundle size.

1. Chart redraws are now debounced, which reduces the amount of times Highcharts re-renders the chart. This results in much improved initial load times, and better user experience. #179
2. Remove some unnecessary lodash-es functions, where the vanilla JS implementation is simpler.

Internal

This release also includes work by @anajavi (again!) to migrate our tests from Mocha and Sinon, to Jest #169

v3.3.0 and Highmaps Support!

New Features

Massive thanks to @anajavi (again!) for the help making this release possible.

Added support for Highmaps

This release adds a new package - react-jsx-highmaps (see #163)

Highmaps use GeoJSON to define a map, then use series to add information to that map.

With React JSX Highcharts, you can pass GeoJSON to via the map prop.

<HighchartsMapChart map={geojson}>

Highcharts provide loads of GeoJSON maps here (use the "GeoJSON" links provided there).

I personally recommend using the react-request library to download the GeoJSON and pass the map data to React JSX Highmaps

<Fetch url="https://code.highcharts.com/mapdata/custom/europe.geo.json">
  {({ fetching, failed, data }) => {
    if (fetching) return <div>Loading…</div>
    if (failed) return <div>Failed to load map.</div>

    if (data) {
      return (
        <HighchartsMapChart map={data}>
          {/* Other map components */}
        </HighchartsMapChart>
      )
    }

    return null
  }}
</Fetch>

Then using the MapSeries, MapLineSeries, MapPointSeries or MapBubbleSeries components you can annotate the map with information.

Simple map example
Map bubble with Latitude and Longtitude

Added the ability to update plotOptions

In some cases you might want to update plotOptions dynamically - previously this was not possible with React JSX Highcharts.

Here is an example that only displays series markers when there is a single data point.

Bug fixes

• Fixes #164 (an issue caused by Highcharts 6.2.0 release)

General updates

Reduced bundle size

• Update to Babel 7 #155
• Simplified how Series type helpers are created #167

Infrastructure improvements

• Integrated with Travis CI #159

v3.2.1

Fixes an error in the NPM package with ES6 module build, relating the to HeatmapSeries #150

v3.2.0

This release adds supports for previously missed series types

Namely:

• BellCurveSeries
• BulletSeries
• HeatmapSeries
• HistogramSeries
• ParetoSeries
• Scatter3dSeries
• SunburstSeries
• TilemapSeries
• VariablePieSeries
• VariwideSeries
• VectorSeries
• WindBarbSeries
• XRangeSeries

ChartProvider now additionally provides the addCredits method

It also paves the way for the beta React JSX Highmaps

v3.1.0

New features

• Adds support for Gauge and Polar charts (#18) - Finally!

Pssst

Keep your eye out for react-jsx-highmaps... coming soon!

v3.0.2

Fix an issue related to Webpack 4 and UMD builds.