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.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.