jon-a-nygaard/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Highcharts example with SystemJS

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

Start the application by running either npm run start or node server.js.
Open localhost:8080 and you should see a simple Highcharts demo.


## app.js
import Highcharts from 'highcharts/highcharts.js';
const chart = Highcharts.chart('container', {
	series: [{
		data: [1, 2, 3]
	}]
});

## index.html
<!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>

## package.json
{
  "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"
  }
}
	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"
	}
	}