Fixed #4994, improved documentation on loading Highcharts in ES6.

readme.md

@@ -6,56 +6,83 @@ Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to V
 * Support: [www.highcharts.com/support](http://www.highcharts.com/support)
 * Issues [Repo guidelines](repo-guidelines.md)
 
-## Download and install
+## Download and install Highcharts
 This is the *working repo* for Highcharts. If you simply want to include Highcharts into a project, use the [distribution package](https://www.npmjs.com/package/highcharts) instead, or read the [download page](http://www.highcharts.com/download). Please note that there are several ways to use Highcharts. For general installation instructions, see [the docs](http://www.highcharts.com/docs/getting-started/installation).
-
-## Build and debug
-If you want to do modifications to Highcharts or fix issues, you may build your own files. Highcharts uses Gulp as the build system. After `npm install` in the root folder, run `gulp`, which will set up a watch task for the JavaScript and SCSS files. Now any changes in the files of the `/js` or `/css` folders will result in new files being built and saved in the `code` folder. Other tasks are also available, like `gulp lint`.
-
+### Use our CDN
+Instead of downloading, you can use our CDN to access files directly. See [code.highcharts.com](https://code.highcharts.com) for details.
 ```
-npm install
-gulp
+<script src="https://code.highcharts.com/highcharts.src.js"></script>
+```
+### Install from npm
+See [npm documentation](https://docs.npmjs.com/) on how to get started with npm.
+```
+npm install --save highcharts
 ```
 
-## Usage in Node/Browserify/Webpack
-This uses the [distribution package](https://www.npmjs.com/package/highcharts) which points to a separate repo.
-
+### Install from Bower
+See [Bower documentation](https://bower.io/) on how to get started with Bower.
 ```
-npm install highcharts
+bower install highcharts
 ```
 
+## Load Highcharts as a CommonJS module
+Highcharts is using an UMD module pattern, as a result it has support for CommonJS.
+*The following examples presumes you are using npm to install Highcharts, see [Download and install Highcharts](#Download_and_install_Highcharts) for more details.*
 ```js
 // Load Highcharts
 var Highcharts = require('highcharts');
-
 // Alternatively, this is how to load Highstock. Highmaps is similar.
 // var Highcharts = require('highcharts/highstock');
 
-// This is how a module is loaded. Pass in Highcharts as a parameter.
+// Load the exporting module, and initialize it.
 require('highcharts/modules/exporting')(Highcharts);
 
 // Generate the chart
 Highcharts.chart('container', {
-  // options - see http://api.highcharts.com/highcharts
+  // options - see https://api.highcharts.com/highcharts
 });
 ```
 
-Example of using Highcharts in `ES2015`:
-
+## Load Highcharts as an ES6 module
+Since Highcharts supports CommonJS, it can be loaded as an ES6 module with the use of transpilers. Two common transpilers are [Babel](https://babeljs.io/) and [TypeScript](https://www.typescriptlang.org/). These have different interpretations of a CommonJS module, which affects your syntax.
+*The following examples presumes you are using npm to install Highcharts, see [Download and install Highcharts](#Download_and_install_Highcharts) for more details.*
+### Babel
 ```js
-// load Highcharts
 import Highcharts from 'highcharts';
-// load the exporting module
+// Alternatively, this is how to load Highstock. Highmaps is similar.
+// import Highcharts from 'highcharts/highstock';
+
+// Load the exporting module.
 import Exporting from 'highcharts/modules/exporting';
+// Initialize exporting module.
+Exporting(Highcharts);
+
+// Generate the chart
+Highcharts.chart('container', {
+  // options - see https://api.highcharts.com/highcharts
+});
+```
+### TypeScript
+```js
+import * as Highcharts from 'highcharts';
+// Alternatively, this is how to load Highstock. Highmaps is similar.
+// import Highcharts from 'highcharts/highstock';
 
-// initialize exporting module
+// Load the exporting module.
+import * as Exporting from 'highcharts/modules/exporting';
+// Initialize exporting module.
 Exporting(Highcharts);
 
 // Generate the chart
-const chart = new Highcharts.Chart({
-  chart: {
-    renderTo: 'container'
-  },
-  // ... more options - see http://api.highcharts.com/highcharts
+Highcharts.chart('container', {
+  // options - see https://api.highcharts.com/highcharts
 });
 ```
+
+## Build and debug
+If you want to do modifications to Highcharts or fix issues, you may build your own files. Highcharts uses Gulp as the build system. After `npm install` in the root folder, run `gulp`, which will set up a watch task for the JavaScript and SCSS files. Now any changes in the files of the `/js` or `/css` folders will result in new files being built and saved in the `code` folder. Other tasks are also available, like `gulp lint`.
+
+```
+npm install
+gulp
+```