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="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/highcharts.js"></script>
<script src="https://unpkg.com/[email protected]/modules/drilldown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts-ng/1.2.1/highcharts-ng.js"></script>
<script src="//code.highcharts.com/modules/data.js"></script>
<div ng-app="myapp">
  <div ng-controller="myctrl">
    <div class="span12">
    
      <div class="form-group">
        <label>Chart Title</label>
        <input ng-model="chartConfig.title.text">
      </div>
      
    </div>
    <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 = {
  "plotOptions": {
    "pie": {
      "center": [
        "50%",
        "50%"
      ],
      "showInLegend": false
    }
  },
  "chart": {
    "backgroundColor": "transparent",
    "type": "pie",
    "height": 300,
    "width": 345,
    "spacingTop": 15,
    "marginRight": 20
  },
  "title": {
    "text": "Browsers",
    "align": "center",
    "margin": 15,
    "style": {
      "color": "#FFFFFF",
      "textTransform": "uppercase",
      "fontSize": "14px"
    }
  },
  "loading": false,
  "series": [
    {
      "name": "Browsers",
      "data": [
        {
          "name": "Chrome",
          "y": 145,
          "color": "#7cb5ec",
          "drilldown": "Chrome"
        }
      ],
      "size": "70%",
      "dataLabels": {
        "distance": -35
      },
      "id": "cc-1"
    },
    {
      "name": "Versions",
      "data": [
        {
          "name": "Chrome v34.0",
          "y": 40,
          "color": "rgb(187,244,255)"
        },
        {
          "name": "Chrome v31.0",
          "y": 10,
          "color": "rgb(170,227,255)"
        },
        {
          "name": "Chrome v40.0",
          "y": 95,
          "color": "rgb(153,210,255)"
        }
      ],
      "size": "100%",
      "innerSize": "70%",
      "dataLabels": {
        "enabled": false
      },
      "id": "cc-2"
    }
  ],
  "lang": {
    "drillUpText": "<< Back"
  },
  "drilldown": {
    "activeDataLabelStyle": {
      "color": "#FFFFFF"
    },
    "series": [
      {
        "id": "Chrome",
        "name": "Chrome",
        "data": [
          {
            "name": "Failed",
            "y": 50,
            "color": "#ff5356"
          },
          {
            "name": "Passed",
            "y": 95,
            "color": "#6aac36"
          }
        ],
        "dataLabels": {
          "enabled": false
    ...