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.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="row">
            <hghchart id="chart1" config="chartConfig" class="span10"></hghchart>
        </div>
    </div>
</div>

<h3><a href="https://github.com/pablojim/highcharts-ng">See Highcharts-ng on github</a></h3>

JavaScript

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

myapp.directive('hghchart', function () {
                return {
                    restrict: 'E',
                    template: '<div></div>',
                    scope: {
                        config: '='
                    },
                    link: function (scope, element) {
                        Highcharts.chart(element[0], scope.config);
                    }
                };
            })

myapp.controller('myctrl', function ($scope) {
    $scope.chartConfig =  {
            chart: {
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false
            },
        title: {
            text: 'Speedometer'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 0 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '100%',
                innerRadius: '100%'
            }]
        },

        // the value axis
        yAxis: {
            min: -200,
            max: 200,
            minorTickInterval: 'auto',
           ...