Angular Chart For Chart Representation

Posted By : Arun Kataria | 29-Jan-2018
Angular-chart responsive, reactive and Beautiful charts for Angular.JS using Chart.js. It is a free open source code for graph representation.
 
 Its required dependencies are:-
  1) AngularJS (requires at least 1.4.x)
   2) Chart.js (requires Chart.js 2.x).
 
Download with npm:-
  install angular-chart.js --save
        
Download with bower:-
bower install angular-chart.js
        
To include the dependencies in your page:
<script src="node_modules/chart.js/Chart.min.js"></script>
        
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
        
After download and included in your pages you to declare a dependency on your module:
 
angular.module('myModule', ['chart.js']);
        
Type of graph in Angular-chart:-
 
1) Line chart.
2) Bar chart.
3) Doughnut Chart
4) Pie Chart
5) Polar area chart.
6) Radar chart.
7) Horizontal bar chart.
9) Bubble chart.
10) Dynamic chart.
11) Reactive chart.
12) Mixed type chart.
 
To include one of the above charts you need to add canvas tag in HTML with the following properties:-
 
1) chart-data: Data which is to be shown in a graph 
2) chart-labels: Data of x-axis labels
3) chart-options: This is the options of Chart.js options, By default, it will be a blank object.
4) chart-series: This is the label of series, By default, it will be a blank array.
5) chart-click: onclick mouse click event handler and it is optional.
6) chart-hover: onmousemove event handler and it is optional.
7) chart-colors: colors for the chart and its default to global colors.
8) chart-dataset: override: override datasets individually and it is optional.
 
And it's content will be included in JS file. To show the data in a graph or set the properties for a graph like to set the custom color for graph representation, hide x-axis label or y-axis label, etc properties can also be changed.

About Author

Author Image
Arun Kataria

Arun has good skills in AngularJS, NodeJS, MongoDB and many more. He is highly motivated which allow him to strive for proficiency when accomplishing assigned duties. He is an excellent team operative.

Request for Proposal

Name is required

Comment is required

Sending message..