{"id":4824,"date":"2016-05-05T20:39:26","date_gmt":"2016-05-05T20:39:26","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=4824"},"modified":"2026-01-08T09:42:23","modified_gmt":"2026-01-08T09:42:23","slug":"188-highcharts-optimized-for-npm","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/news\/188-highcharts-optimized-for-npm\/","title":{"rendered":"Highcharts optimized for npm"},"content":{"rendered":"

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<\/a>.<\/p>\n

In a CommonJS environment, the Highcharts variable will be assigned to module.exports<\/code> 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.<\/p>\n

To learn more about how to set up Highcharts and its different modules with npm, see\u00a0how to install Highcharts from npm<\/a>.\u00a0Highstock and Highmaps are available in the same package as Highcharts.<\/p>\n

<\/div>\n

Example with Browserify and Webpack<\/h2>\n

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

In your application file, do the following to load and use Highcharts<\/p>\n

var Highcharts = require('highcharts'); \/\/ Since 4.2.0\r\nHighcharts.chart('container', { \/*Highcharts options *\/});<\/pre>\n
Afterwards you use your bundle system to generate a single distribution file.\u00a0The result will be a nicely packed JavaScript file.<\/p>\n
<\/div>\n