Directive for implementing Highcharts in AngularJS

rani
 
on Jul 10, 2020 11:22 PM
Sample_828990.zip
1289 Views

Is there any directive available for highcharts in AngularJS?

If yes how to implement it.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 11, 2020 05:39 AM
on Jul 11, 2020 05:40 AM

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