Highcharts optimized for npm

We are happy to announce that Highcharts since version 4.1.10 supports the CommonJS module pattern out of the box. Which means that all our distribution files are now available to load properly in CommonJS environments like Node.js.

In a CommonJS environment, the Highcharts variable will be assigned to module.exports instead of being set globally. This is a best practice to avoid polluting the global namespace. If by any chance you would like to use Highcharts as a global variable, you must set it yourself. This applies only to CommonJS environments.

To learn more about how to set up Highcharts and its different modules with npm, see how to install Highcharts from npm. Highstock and Highmaps are available in the same package as Highcharts.

Example with Browserify and Webpack

One of the popular things to do in a CommonJS environment is the use of bundle systems. Browserify and Webpack are great examples of such systems. Below you can find a simple example of how to use Highcharts with these.

In your application file, do the following to load and use Highcharts

var Highcharts = require('highcharts'); // Since 4.2.0
Highcharts.chart('container', { /*Highcharts options */});

Afterwards you use your bundle system to generate a single distribution file. The result will be a nicely packed JavaScript file.

Example with React Application

Isomorphic JavaScript, also called universal JavaScript, is a term for code that can run both on the client and the server. One of the most popular isomorphic libraries today is React. Below you can find an example of how to use Highcharts with React.

If a window is not present, Highcharts will not run, unless explicitly told to. This means that Highcharts is not executed on the server side. If you still would like to do so, you will have to pass in a valid window as a parameter.

This is the simplest example of how to use Highcharts with React. For React users it is advisable to integrate Highcharts as a component, which will improve reusability.

var React = require('react'),
    ReactDOM = require('react-dom'),
    Highcharts = require('highcharts'); // Since 4.2.0
var element = React.createElement('div', { id: 'chart' });
ReactDOM.render(element, document.getElementById('react-app'), function () {
   // Load Highcharts with adapter once window is present
   Highcharts.chart('chart', { /*Highcharts options*/});
});