Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
       <chart></chart>
    </div>
</div>

JavaScript

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

function myctrl($scope) {
    $scope.chartConfig = {
    		colors: ['red'],
        yAxis: {
        	gridLineWidth: 0,
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    }
};

myapp.component('chart', {
	template: '<highchart id="chart1" config="chartConfig"></highchart>',
	controller: myctrl,
	bindings: {
	}
});