Basic Highcharts-ng demo

Basic Highcharts-ng demo author(s): pablojim

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>

<div ng-app="myapp">
  <div ng-controller="myctrl">
    <div class="row">
      <highchart id="chart1" config="chartConfig" class="span10"></highchart>
    </div>
    <div class="row">
      <highchart id="chart2" config="chartConfig2" class="span10"></highchart>
    </div>
    <div class="row">
      <highchart id="chart3" config="chartConfig3" class="span10"></highchart>
    </div>
  </div>
</div>

CSS

.chart {
    min-width: 400px;
    max-width: 800px;
    height: 220px;
    margin: 0 auto;
}

JavaScript

//See: https://github.com/pablojim/highcharts-ng

$(function () {
  var myapp = angular.module('myapp', ["highcharts-ng"]);

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

    $scope.addPoints = function (chartConfig) {
      var seriesArray = chartConfig.series
      var rndIdx = Math.floor(Math.random() * seriesArray.length);
      var rnd = []
      for (var i = 0; i < 30; i++) {
        rnd.push(Math.floor(Math.random() * 20) + 1)
      }

      seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat(rnd)
    };

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

    $scope.chartConfig = {
                chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20,
                    zoomType: 'x'
                },
      series: [{
        data: [],
        color: Highcharts.getOptions().colors[0],
      }],
      title: {
        text: 'Hello'
      },
      xAxis: {
        crosshair: true,
        events: {
          setExtremes: syncExtremes
        },
        labels: {
          format: '{value} kg'
        }
      }
    }

    $scope.chartConfig2 = {
                chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20,
                    zoomType: 'x'
                },
      series: [{
        data: [],
        id: 'series2',
        color: Highcharts.getOptions().colors[3],
     ...