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.

v3.0.1

Changes

A patch release to stop PlotBands and PlotLines updating unnecessarily.

Version 3!

Version 3 is here!

Massive thanks to @anajavi!

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.

What about the minority of cases then?

Breaking changes (for the minority)

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)

This is an advanced feature, which few people use, but if this impacts you see the guide here

New features!

id props are no longer required

Previously, every Axis, Series, Plot Band and Plot Line required a unique id prop. This is no longer the case, in the majority of cases, the ID can be omitted and a UUID will be used instead.

Caveats: For Highstock charts with a Navigator, it will be easier to provide your series with a known id, so you can simply refer to it, i.e. <Navigator.Series seriesId="mySeries" />

Helpful error messages when an additional Highcharts module is required

In development environments, React JSX Highcharts will now raise helpful errors in the console. Letting you know which modules you likely need to add. For example...

Caveats: If you are using Highcharts styled mode, you'll need to import modules from the /js/ folder i.e. highcharts/js/highcharts-more

ES6 module builds

All credit here goes to @anajavi, thanks!!

This enables bundlers like Webpack to perform tree shaking, removing any parts of React JSX Highcharts you don't use in your application

New logo

I'm not a designer, but I tried...