AngularJS Pie Chart Using Highcharts Library With Example

watch_later Saturday, February 2, 2019
comment 2 Comments


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 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.


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="">
    <title>Highcharts Simple Bar Chart</title>
    <script src=""></script>
    <script src=""></script>
    <script src=""></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) {
                  template: '<div id="container" style="margin: 0 auto">not working</div>',
                  link: function (scope, element, attrs) {
                      var chart = new Highcharts.Chart({
                          chart: {
                              renderTo: 'container',
                              plotBackgroundColor: null,
                              plotBorderWidth: null,
                              plotShadow: false
                          title: {
                              text: 'Codingvila Web/Software Development Contribution, 2019'
                          tooltip: {
                              pointFormat: '{}: <b>{point.percentage:.2f}%</b>',
                              percentageDecimals: 1
                          plotOptions: {
                              pie: {
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      color: '#000000',
                                      connectorColor: '#000000',
                                      formatter: function () {
                                          return '<b>' + + '</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);
    <div ng-app="myApp">
        <div ng-controller="ChartControl">
            <div class="hc-pie" items="MyContribution"></div>



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.


I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular training

delete October 28, 2019 at 11:18 PM

sentiment_satisfied Emoticon