Series

React JSX Highcharts provides multiple components for all the different series types. However these are only convenient helper components for <Series />

Note For v1 and v2 users, this requires an id prop

Note In the vast majority of cases, a series should be wrapped in an Axis component.

Currently React JSX Highcharts provides these series types

React JSX Highstock provides all of the above, and these additional types

React JSX Highmaps provides these map series types

If you find the series component you need is missing you can use the Series directly <Series type="someType" />

Example

<YAxis>
  <YAxis.Title>My Axis Title</YAxis.Title>
  <AreaSeries data={areaData} />
  <LineSeries data={lineData} />
  <SplineSeries data={splineData} /> 
</YAxis>

Updating a series

React JSX Highcharts attempts to be intelligent about which series update method it uses, only using the expensive Series.update when no other alternative is available.

For example:

• When the data prop is modified, the setData method is used
• When the visible prop is modified, the setVisible method is used

Note be aware that as your data object is passed by reference, you must clone your data before modifying it, otherwise React will think it has not changed, and will not re-render.

Example - adding a data point and cloning

const addDataPoint = (data, pointToAdd) => {
  const newData = data.slice(0); // Clone data array
  newData.push(pointToAdd);
  return newData;
};