Skip to content

v3.4.0 Highcharts 7 and Annotations support
Compare
Choose a tag to compare
@whawker whawker released this 13 Dec 11:03
· 458 commits to master since this release
v3.4.0
099ae50

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

Assets 2
Loading