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://rawgit.com/ValentinH/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="row">
            <highchart id="chart1" config="chartConfig" class="span10"></highchart>
        </div>
    </div>
</div>

JavaScript

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

myapp.controller('myctrl', function ($scope) {

    $scope.chartConfig = {
  "size": {
    "height": 366,
    "width": 412
  },
  "options": {
    "plotOptions": {
      "column": {
        "stacking": "normal",
        "events": {
          
        }
      },
      "allowPointSelect": false
    },
    "tooltip": {
      "enabled": false
    }
  },
  "title": {
    "text": "",
    "align": "left",
    "style": {
      "color": "#0065B9",
      "font": "16px \"Trebuchet MS\", Verdana, sans-serif"
    }
  },
  "tooltip": {
    "enabled": false,
    "backgroundColor": "#FCFFC5"
  },
  "legend": {
    "layout": "vertical",
    "align": "right",
    "verticalAlign": "middle",
    "floating": false,
    "backgroundColor": "#FFFFFF"
  },
  "yAxis": {
    "reversedStacks": false,
    "stackLabels": {
      "enabled": true,
      "style": {
        "color": "black",
        "fontSize": "9px"
      },
      "y": -20,
      "formatter": function(){
        return`<br/> x` + this.total;
      }
    },
    "title": {
      "text": null
    },
    "min": 0
  },
  "xAxis": {
    "categories": [
      
    ]
  },
  "series": [
    {
      "color": "#78C9D8",
      "enableMouseTracking": "false",
      "name": "ซื้อ",
      "stack": "sellin",
      "type": "column",
      "data": [
        914,
        961,
        10
      ],
      "dataLabels": {
        "enabled": false,
        "allowOverlap": true,
        "style": {
          "fontSize": "7px",
          "color": "white"
        }
      }
    },
    {
      "color": "#006BB5",
      "enableMouseTracking": "false",
      "name": "ขาย",
      "stack": "sellout",
      "type": "column",
      "data": [
        697,
        774,
        119
      ],
      "dataLabels": {
        "enabled": true,
        "allowOverlap": true,
        "style": {
          "fontSize": "7px",
          "color": "white"
        }
      }
   ...