AngularJS Pie Chart Using Highcharts Library With Example

watch_later 2/03/2019

Introduction

This article gives an explanation about how to create and use charts in angular using the highcharts library with a simple example and also show the use of angular directive for a pie chart or a circle chart. Here I'll also explain what is the pie chart and what is highcharts library and how to use in AngularJS web application.

What is Pie Chart?

Pie Chart is also known as circle chart it is a circular statistical graphic, that is split into slices parenthetically numerical proportion.it is used to show proportions and percentages between the different kind of categories, by dividing a circle into proportional segments.

What is Highcharts?

Highcharts is a software library for charting and it is written in pure JavaScript. It offers an easy way different kind of chats like a pie chart, bar chart, scatter chart, spline and many other charts to your web application.

Implementation

So, Let's Start with an example of the codingvila website where we will generate pie chat based on posted articles, blogs and etc using angularJs and Highcharts. To, Generate chart in Angular Application you need to link Angular Script and Highchart library with your web application for creating the pie chart as I shown below.

HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Simple Bar Chart</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript">
        function ChartControl($scope, limitToFilter) {
            $scope.Contribution = [
              ['Articles', 23],
              ['Blogs', 13],
              ['Other', 2]
            ];
 
            $scope.MyContribution = limitToFilter($scope.Contribution, 4);
        }
 
        angular.module('myApp', [])
          .directive('hcPie'function () {
              return {
                  restrict: 'C',
                  replace: true,
                  scope: {
                      items: '='
                  },
                  controller: function ($scope, $element, $attrs) {
                      console.log(3);
 
                  },
                  template: '<div id="container" style="margin: 0 auto">not working</div>',
                  link: function (scope, element, attrs) {
                      console.log(3);
                      var chart = new Highcharts.Chart({
                          chart: {
                              renderTo: 'container',
                              plotBackgroundColor: null,
                              plotBorderWidth: null,
                              plotShadow: false
                          },
                          title: {
                              text: 'Codingvila Web/Software Development Contribution, 2019'
                          },
                          tooltip: {
                              pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>',
                              percentageDecimals: 1
                          },
                          plotOptions: {
                              pie: {
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      color: '#000000',
                                      connectorColor: '#000000',
                                      formatter: function () {
                                          return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                                      }
                                  }
                              }
                          },
                          series: [{
                              type: 'pie',
                              name: 'Total Contribution',
                              data: scope.items
                          }]
                      });
                      scope.$watch("items"function (newValue) {
                          chart.series[0].setData(newValue, true);
                      }, true);
 
                  }
              }
          });
    </script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="ChartControl">
            <div class="hc-pie" items="MyContribution"></div>
        </div>
    </div>
</body>
</html>

Output 


Summary

This article gives an explanation about how to create charts using angularJs in web applications as well as also show you how you can use the highchart library to creating a different kind of charts in your web application.

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

sentiment_satisfied Emoticon