Highcharts 5 preview

Finally we’re ready to show you a preview of the features we’ve been working on for the last months. Highcharts 5 will bring new features like full separation of SVG from CSS, an API for responsiveness, dynamic update for all options, a fully node based build system and improvements to Highstock and Highmaps.

We’re showing you an early candidate for Highcharts 5, and there will be bugs. But we’re eager to get feedback at this stage, before polishing the new features. Feel free to test it out to see how it works for you.

Please leave any comments and questions below for other testers to see. We’re very thankful for any feedback you may have!

STYLE HIGHCHARTS BY CSS

Since the start, styling Highcharts has mainly been done through setting styles in the JavaScript API. There are two reasons for this. First, this was the only way to provide a consistent API across browsers when old IE was still common. Secondly, our experience from Highslide was that many beginners were confused by having to make some settings in JavaScript and others in CSS.

Today, the targets have shifted. SVG is ubiquitous and stylable, and our enterprise users require a cleaner separation of chart layout and design. With a clean separation of CSS from the SVG, the developers can set up the general functionality of the chart, then pass it over to the designers who can do their work in CSS like they’re familiar with.

See the Style by CSS article to learn more, with code examples.

RESPONSIVE CHARTS

Highcharts charts have always resized to match the size of the page, and series and axes have responded to the new size. The news in Highcharts 5 is that you can create responsive charts much the same way you work with responsive web pages. A new top-level option, responsive, is added to the configuration. It lets you define a set of rules, each with a condition, for example chart.width < 500, and a separate set of chartOptions that is applied on top of the general chart options. One of the most handy options is chart.className that can be used to control the style of all other elements as per the section above. This lets you define size-dependent settings for all aspects of the chart. Typical use could be to move the legend or modify how much space the axes take up.

responsive: {
  rules: [{
    condition: {
      key: 'this.chartWidth',
      operator: '<',
      value: 500,
      // callback: function () { return someThing(); }
    },
    chartOptions: {
      chart: {
        className: 'small-chart'
      },
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'horizontal'
      }
    }
  }]
}

MORE DYNAMIC

Another, related improvement in Highcharts 5 is the general Chart.update method. In Highcharts 4 we have methods like Series.update, Axis.update and Point.update, but there was no simple way to update things like the legend, tooltip or general chart settings without destroying the chart, modifying the options and create a new chart.

chart.update({
  chart: {
    inverted: true
  },
  subtitle: {
    text: 'Inverted'
  },
  legend: {
    enabled: false
  }
});

View live demo.

MULTIPLE SERIES IN HIGHSTOCK NAVIGATOR

The ability to show multiple series in the navigator has long been a requested feature for Highstock, and we’re excited to introduce this feature with Highstock 5. You will now have a series.showInNavigator option that controls each series’ visibility in the navigator, as well as a series.navigatorOptions option to set specific options for each series’ navigator counterpart. In order to not break backwards compatibility, the new options will override the old navigator.baseSeries and navigator options. View live demo.

SIMPLER CHART CONFIGURATION IN HIGHMAPS

Creating a chart with Highmaps has now become easier by introducing more intuitive options and smarter defaults, as well as tighter integration with the Highmaps Map Collection. We now support a chart.map option that sets the base mapData for all series. This option accepts either a string as an index to the Highcharts.maps array, or a GeoJSON object. The chart.map option can still be overridden on a per-series basis, using the series.mapData option.

We also added support for defining data by tuples, where the first element by default maps to the hc-key property of the mapData, commonly used with the Highmaps Map Collection. Put together, this means that we can now write code like this:

Highcharts.Map('container', {
    chart: {
        map: 'countries/us/us-all'
    },
    series: [{
        data: [
            ['ak', 13],
            ['ca', 14],
            ['wa', 17],
            ['vt', 21],
            ['il', 12]
        ]
    }]
});

View live demo.

ACCESSIBILITY

For the past year we have been working extensively on research and development towards more accessible charts, and finding solutions particularly for non-visual and keyboard-only users. For this project we partnered up with Elsevier, a world-leading academic publishing company and long time Highcharts customer. Our work led us to present at the 2016 CSUN conference for Technology and Persons with Disabilities in San Diego, and resulted in a prototype of a new accessibility module for Highcharts. By including the new accessibility module your charts will be screen-reader ready and keyboard friendly out of the box. The module also adds customization options for fine grained control of its behavior.
While the module is still in an early prototype stage, a working demo of accessible charts can be found here. Try visiting the page with a screen reader, or navigating the charts using your TAB and arrow keys.

ES6 MODULE FORMAT

All our part files are now converted into the ES6 module format. Which means that we are readying ourselves for the new standard within JavaScript development. Each part file roughly relates to a Highcharts feature. Dependencies on other part files are defined in each part file. This change opens up for creating custom builds using a node-based bundler.

CUSTOM BUILDS

While we await the support of ES6 modules in the browser, we still want to make use of this new technology. To do this you can either include our parts files through a bundling system, e.g Webpack or Browserify, in combination with Babel. Otherwise you can use the Highcharts build script.
The Highcharts build script is an application written to run in a Node.js environment. It will be our new standard for creating our distribution files. It can also be used to create custom Highcharts files. A simple example of how this can be done is shown below:
First, step towards your own custom build is to configure your own custom file.

// custom.js
import Highcharts from 'highcharts/js/parts/Globals';
import 'highcharts/js/parts/Tooltip';
import 'highcharts/js/parts/ColumnSeries';
export Highcharts;

Then create a build script which will make a distribution file from your custom.js

// build.js
var build = require('highcharts/build');
build({
  files: ['custom.js'],
  output: 'dist'
});

Then run ‘node build.js’ in a command line environment to execute the script. The result will be a new file ‘dist/custom.js’ which is ready for use in a browser. Since this file only contains the functionality you have chosen, it will also have a lower in filesize than our standard distribution files.