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.
