Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by David

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>
<div id="chart-wrapper" ng-app="myapp">
  <div ng-controller="myctrl">
    <div class="container-fluid widget">
      <div class="row widget-header">
        <div class="col">
          <div class="section-title">
            <span translate="" class="ng-scope ng-binding">Verification Average Delta-E Trends</span>
          </div>
        </div>
      </div>
      <div class="row widget-body">
        <div class="col">
          <!-- ngIf: !config.hasData() -->
          <!-- ngIf: config.hasData() -->
          <highchart class="widget-chart ng-scope ng-isolate-scope" ng-if="config.hasData()" config="chartConfig" data-highcharts-chart="0">
            <div id="highcharts-xjqtpej-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 600px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
              <svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
                            <desc>Created with Highcharts 6.1.1</desc>
                            <defs>
                                <clipPath id="highcharts-xjqtpej-1">
                                    <rect x="0" y="0" width="551" height="316" fill="none"></rect>
                                </clipPath>
                                <clipPath id="highcharts-xjqtpej-2">
                                    <rect x="0" y="-10" width="650" height="400" fill="none"></rect>
                 ...

CSS

body,
html {
  border: 0px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  position: relative;
  width: 100%;
}

.widget-body {
  float: left;
  height: 200px;
  width: 100%;
}

.widget-chart {
  background-color: #AF3456;
  width: 50% !important;
  height: 50% !important;
  padding: 1%;
  float: left;
}

JavaScript

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

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

  $scope.chartConfig = {
    series: [{
      data: [10, 15, 12, 8, 7]
    }],
  }



});