Upgrading from 2.x to 3.x

The Newspaper Headline

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.

Cheers from the crowd, until someone pipes up...

What about the minority of cases then?

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)

React JSX Highcharts provides an advanced set of higher order components, that inject Highcharts functions into a component to allow them to interact with the chart instance

The vast amount of users don't seem to be using these advance features, so most users will be fine.

provideChart HOC changes

In v2, this HOC injected the props

get, update, addAxis, addSeries, setTitle, showLoading, hideLoading getChart and getChartType

In v3, this HOC injects a single prop

getChart

This is a function, that returns an object

this.props.getChart();
// Which returns an object with props

Object Property	Description	v2 Equivalent
object	The Highcharts chart instance	this.props.getChart
type	The type of chart, either 'chart' or 'stockChart'	this.props.getChartType
get	The get function	this.props.get
addAxis	The addAxis function	this.props.addAxis
addSeries	The addSeries function	this.props.addSeries
setTitle	The setTitle function	this.props.setTitle
showLoading	The showLoading function	this.props.showLoading
hideLoading	The hideLoading function	this.props.hideLoading

provideAxis HOC changes

In v2, this HOC injected the props

update, remove, addPlotBand, removePlotBand, addPlotLine, removePlotLine getExtremes, setExtremes, setTitle and getAxis

In v3, this HOC injects a single prop

getAxis

This is a function, that returns an object

this.props.getAxis();
// Which returns an object with props

Object Property	Description	v2 Equivalent
object	The Highcharts axis instance	this.props.getAxis
id	The axis ID string	No equivalent
type	The axis type string (xAxis, yAxis, zAxis)	No equivalent
update	The update function	this.props.update
remove	The remove function	this.props.remove
addPlotBand	The addPlotBand function	this.props.addPlotBand
removePlotBand	The removePlotBand function	this.props.removePlotBand
addPlotLine	The addPlotLine function	this.props.addPlotLine
removePlotLine	The removePlotLine function	this.props.removePlotLine
getExtremes	The getExtremes function	this.props.getExtremes
setExtremes	The setExtremes function	this.props.setExtremes
setTitle	The setTitle function	this.props.setTitle

provideSeries HOC changes

In v2, this HOC injected the props

update, remove, setData, setVisible and getSeries

In v3, this HOC injects a single prop

getSeries

This is a function, that returns an object

this.props.getSeries();
// Which returns an object with props

Object Property	Description	v2 Equivalent
object	The Highcharts series instance	this.props.getSeries
id	The series ID string	No equivalent
type	The series type string	No equivalent
update	The update function	this.props.update
remove	The remove function	this.props.remove
setData	The addPlotBand function	this.props.setData
setVisible	The removePlotBand function	this.props.setVisible