Chart.js is an HTML5 canvas based responsive, flexible, light-weight charting library. The library supports six different chart types, each of these chart types coming with a load of customization options. If that is not enough, you also have the ability to create your own custom chart types.
we will discuss in this post about installation and creation of Angular chart js.
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]
The process of installation of angular chart JS library:
1. Npm:- npm install chart.js –save
2.Bower: – Bower install chart.js –save
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]
Creating a chart using Angular Chart JS:
Like this way, we can include a chart in the html file and we need to write some code in the controller to show the chart.
[/et_pb_text][et_pb_image admin_label=”Image” src=”http://www.habilelabs.io/wp-content/uploads/2016/07/chart12.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”center” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” alt=”Angular chart js” title_text=”Angular chart js”] [/et_pb_image][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]
Chart.JS Configuration:
Chart.js provides a number of options for changing the behavior of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point.
The chart data are always represented as an array. Each array element represents a set of chart data, for example, a point on a line chart. The chart data set must have a certain format depending on the chart type:
•Line type chart
– array (number, number)
where the first number represents the value on the horizontal axis and the second number represents the values on the vertical axis.
•Bar type chart
– array (string, number)
where the string is the bar name on the horizontal axis and the number is its value on the vertical axis.
•Pie type chart
– array (string, number)
where the string is the section name and the number represents the section value.
If you have any problem creating the chart using angular chart js library then ask us in the comment box. We provide best Web development Services.
Hope you enjoy this post, so don’t forget to share with your friends.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
