Hi rani,
You can create your own directive and use for binding the chart.
Or if you want to use HighChart directive refer below link.
https://github.com/pablojim/highcharts-ng
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '@',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
});
app.controller('MyController', function ($scope) {
$scope.pieData = [
{ name: "IE", y: 56.33 },
{ name: "Chrome", y: 24.03 },
{ name: "Firefox", y: 10.38, sliced: true, selected: true },
{ name: "Safari", y: 4.77 },
{ name: "Opera", y: 0.91 },
{ name: "Other", y: 3.58}]
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<hc-pie-chart title="Browser usage" data="pieData"></hc-pie-chart>
</div>
</body>
</html>
Demo
