v5.0.1

• support highcharts v11

v5.0.0

Breaking changes:

• Drop support for react < 17
• Drop support for highcharts < 9.1.2
• Drop support for old browsers. The supported browsers are:
  • chrome >= 81
  • edge >= 81
  • firefox >= 78
  • ios >= 12
  • safari >= 12

New Features:

• Support react 18 #360
• Axis events can be updated #333

Other changes:

• prop-types are removed #354
• chart is destroyed on unmount without requestAnimationFrame #332

v4.3.2

• Support highcharts v10

[email protected]

Changes:

• Typescript definitions for react-jsx-highmaps #344

Thanks @AspieCoder1

v4.3.1

Features:

• react-jsx-highstock typescript types #338 thanks @veloek
• <Loading isLoading /> typing #342 thanks @ricopella

v4.2.1

Changes:

• Allow highcharts@^9 as peer dependency
• Allow updating of series eventhandlers #318

v4.2.0 🌿

New Features

React 17 support

This release enables React 17 support, with some minor changes to useEffect clean ups now the clean up function is always run asynchronously - Thanks @anajavi! (see #310 and #315 )

Typescript definitions

This release adds Typescript definitions to the react-jsx-highcharts only, we hope to add support for the other packages in future releases. - Thanks @anajavi (see #303)

v4.1.0

New features

containerProps support

Added the ability to pass a containerProps prop to the root component of a chart. This allows you to set HTML attributes on the container <div> the chart is rendered in.

See #283 and example

Configuring how series data is updated via jsxOptions

When the data prop on your <Series /> component changes, React JSX Highcharts calls setData on that series internally.

In some scenarios, you may want to override the the default arguments of setData such as setting updatePoints to false when working with large amounts of data in a series.

Example using default options - WARNING - clicking the Green button will crash your browser tab
Example overriding updatePoints to false via a jsxOptions prop on a series

See #281

Bug fixes

• Fixes #289 where some Tooltip props were not updated properly, see fix in #290

Internal changes

• Following current best practice React is imported with import * as React from 'react' (see #292)
• Updated to Prettier 2 (see #280)

Thanks to @anajavi, @veloek and @lezan for there support in creating this release.

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