This is an example of how Highcharts can be used with SystemJS. It uses SystemJS to load source files, SystemJS Babel Plugin to transpile ES6 code, ExpressJS for the server application. ##Steps Install dependencies
npm install
Run the application
npm run start or node server.js.| import Highcharts from 'highcharts/highcharts.js'; | |
| const chart = Highcharts.chart('container', { | |
| series: [{ | |
| data: [1, 2, 3] | |
| }] | |
| }); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>System.js demo</title> | |
| </head> | |
| <body> | |
| <h1>Highcharts example with SystemJS</h1> | |
| <div id="container"></div> | |
| <script src="/node_modules/systemjs/dist/system.src.js"></script> | |
| <script> | |
| System.config({ | |
| baseURL: './', | |
| map: { | |
| 'plugin-babel': 'node_modules/systemjs-plugin-babel/plugin-babel.js', | |
| 'systemjs-babel-build': 'node_modules/systemjs-plugin-babel/systemjs-babel-browser.js', | |
| 'highcharts': 'node_modules/highcharts' | |
| }, | |
| transpiler: 'plugin-babel' | |
| }); | |
| System.import('app.js'); | |
| </script> | |
| </body> | |
| </html> |
| { | |
| "name": "highcharts-systemjs", | |
| "version": "1.0.0", | |
| "description": "**Install dependencies**", | |
| "main": "server.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "start": "node server.js" | |
| }, | |
| "author": "Jon Arild Nygård", | |
| "license": "ISC", | |
| "dependencies": { | |
| "express": "^4.14.0", | |
| "highcharts": "^5.0.0", | |
| "systemjs": "^0.19.39", | |
| "systemjs-plugin-babel": "0.0.16" | |
| } | |
| } |
@tsabirgaliev Try this
import Highcharts from 'highcharts/highcharts.js';
import * as HighchartsMore from 'highcharts/Highcharts-more.js';
HighchartsMore(Highcharts);
@gevgeny I love you!
What about adding extensions? highcharts-more for example?