JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="span12">
          <div class="row"> 
              <highchart id="chart1" config="chartConfig" class="span10"></highchart>
          </div>
          {{chartConfig.series[0].data}}      
        </div>
    </div>
</div>

JavaScript

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

myapp.controller('myctrl', ['$scope','$interval',function ($scope, $interval) {
 
  $scope.chartConfig = {

    series: [
      {
        type: 'column',
        data: [{y:1, color: 'red'},1,2,3,4,5]
          
      }
    ],
    yAxis:[{
      title: {
        text: 'Count'
      }
    }],
    useHighStocks: false
  };


  $interval(function() {
		$scope.chartConfig.series[0].data[0].color = $scope.chartConfig.series[0].data[0].color == 'blue' ? 'red' : 'blue';
 
	//$scope.chartConfig.series[0].data.push({y:10});
	}, 1000);


}]);