Announcing Highcharts 5

Posted on September 28, 2016 by Torstein Hønsi. Last modified on September 29, 2016.

 After a year of development, we are proud (and relieved!) to release version 5 of Highcharts, Highstock, and Highmaps.

This release offers a robust feature set, built in response to the needs and suggestions of our active community of developers, along with innovations, such as Accessibility and ES6 support, which we’ve implemented in an effort to move the industry forwards. Other key updates include 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.

Read more about this update below, then download it today by registering for a free licence, updating your commercial license, which now includes a start-up friendly, low-cost offering called “High Five”. Customers with existing maintenance & support plans qualify for a free update.

 


Highcharts 5 Feature Updates

CSS STYLING

We have made a significant architectural change. Users now have the option to choose between a traditional or a CSS driven mode of our library, with the latter allowing for chart styling using CSS rather than via the JavaScript API.

The styled mode offers a clean separation of CSS from the SVG. This allows enterprise development teams to easily adopt Highcharts in workflows where developers set up the general functionality of a web app, then pass it over to the designers to do their work in CSS. Check out this blog post for examples of this new feature in action.

 

RESPONSIVE CHARTS

Highcharts charts have always resized to match the size of the page, and series and axes have responded to the new size. We are now going beyond the basics, allowing you to create responsive charts much the same way you work with responsive web pages. A new top-level option, responsive, lets you define a set of rules, each with a condition. Among other things, you are able to 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.


ACCESSIBILITY

For the past year, we have been working extensively on research and development towards more accessible charts. Elsevier, a world-leading provider of scientific, technical and medical information products, has been a key development partner in this effort. The result is a new, screen-reader friendly, accessibility module which simplifies reading chart data for non-visual and keyboard-only users. This module conforms to the latest W3C WCAG and Section 508 standards, yet extends far beyond these basic requirements. Here is a working demo that you can check out by navigating the charts using your TAB and arrow keys. Read more about this module in our documentation.

 

MORE DYNAMIC

Another related improvement is the general Chart.update method. Previously we had 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.

 

Node and ES6-based module system

This release continues where we left off with version 4.1 and 4.2, supporting the CommonJS module pattern and npm package management, as well as requiring no external framework adapters. All our part files are now converted into ES6 module format, which among other things, opens up for creating custom builds using a node-based bundler. Incidentally, we created our own build script as a Node.js application, which will be our standard way of creating distribution files going forward. Read more about custom builds in our documentation.

 

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. 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. 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.

 

QUESTIONS, SUGGESTIONS OR TIPS?

As usual, we are eager to hear from you and help you out if our documentation doesn’t provide you with the answers you need, if you are stuck, have uncovered a bug or have a feature request. Also, make sure you subscribe to our mailing list and get notified of updates, bug fixes, tutorials and best practices.