Skip to content

Version 4!
Compare
Choose a tag to compare
@whawker whawker released this 17 Dec 08:52
· 196 commits to master since this release
v4.0.0
22049c6

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!

Assets 2
Loading