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