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/v0.0.1/src/directives/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
      
        <highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>
    </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.controller('myctrl', function ($scope,$compile) {

  
   $scope.someValues = [
   'xxx aa',
   'xxx bb',
   'xxx cc',
   'xxx dd',
   'xxx ee',
   'xxx aa',
   'xxx bb',
   'xxx cc',
   'xxx dd',
   'xxx ee',
   'xxx ff'
   
   ];

    $scope.chart = {
        options: {
            chart: {
                type: 'bar'
            },
            yAxis: {
        labels: {
    formatter: function () {
       return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+$scope.someValues[this.value]+'</div>';
       
    },
    useHTML: true
}
    },
        },
        
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        }
    }

});