Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by leongaban

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 ng-app="myapp">
    <div ng-controller="myctrl">
        <div id="chartContainer" >
            <highchart id="chart1" config="chartConfig"></highchart>
        </div>
        <button class="button" ng-click="resizeChart()">Resize</button>
    </div>
</div>

CSS

#chart1 {
    background-color: #AF3456;
    width:400px;
    height:200px;
    padding:10px;
}

.button {
  margin-top: 10px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #f8f8f8;
  cursor: pointer;
}

JavaScript

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

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

    $scope.chartConfig = {
				chart: {
          	events: {
            		redraw: function () {
              		console.log('The chart is being redrawn');
            		}
          	}
        },
				series: [{
            data: [10, 15, 12, 8, 7]
        }]
    }

		$scope.resizeChart = function() {
				$scope.chartConfig.chart.width  = `800px`;
				$scope.chartConfig.chart.height = `400px`;
        console.log('chart.width',$scope.chartConfig.chart.width);
        console.log('chart.height',$scope.chartConfig.chart.height);
    }

});