Habilelabs-Logo
Blog

Chart.js – How to Use it with Angular.js

October 28th, 2020 . 4 minutes read
Blog featured image

Chart.js is an open-source JavaScript-based charting library, which easily displays a huge amount of data in the form of interactive graphs and charts.

The main feature of Chart.js is that it is directive-based therefore, you can simply import a pass required value and get your chart ready for data analysis.

The highlighting characteristics of ChartJS are-

  • Simplicity & Flexibility
  • Custom Functionality
  • High Performance

After working on many charting libraries, I found Chart.js far too easier for data management than others.

This blog post is a brief discussion about important features of chart.js, learning how to integrate it into your angular.js project and how to use them easily-

How to Integrate Chart.js to Angular.js?

These features will help you to create a custom chart or graph in your project in no time. First of all, we need to install chart.js in your project using NPM or Bower available for it.

You just have to install it first, with this command –

Once the installation is complete, the library will automatically be installed to the angular .json package.

Here, we have implemented the chart.js in our project. Now, we are ready to use chart.js in our project and import the graphs in our HTML page. 

You can also check how to integrate MX- graph with AngularJS –

Generating a New Graph

After Implementation, we can easily create a new chart/graph in a component or directive as shown in the example, import them in the required HTML page, and pass an array of graph data.

Now, we can create a graph component, as shown in below example-

Now, we have integrated <canvas> in the directive or component Html page-

Well, we have integrated the Chart.js and created the Radar-Graph but how to have a custom graph or chart punctuality that you want?

In the successive section of this blog, you will see some useful parameters and functions to create a custom chart-

Insert Graph/Chart Parameters –

In Canvas, chart-type parameter is declared as type of the chart in our case as we are using Radar Graph chart-type = "radar".

  • Chart-options – This option customizes chart components, as you want.
  • Chart-Plugin – This feature adds extra plugins to customize your graph design as per your requirement.
  • Chart-data – It provides data to be shown in the graph.

Event listener Functionality-

Adding event listening functionality in graph/chart is one of the most challenging tasks. Chart.js graph provides a number of event listener options like click, double-click, hover, touch and many more.

Onclick Event –

For Onclick event, we have to add in this we have to create a function like this in controller and write operational code in the function.

Conclusion:

Now that you have a basic idea of integration of the chart.js graph, it extends a lot of possibilities of its functionalities.

A large number of sites are currently using chart.js because it’s easy to customize. And not only for Angular projects, but this chart library can be used for other JavaScript frameworks as well.

Hope you enjoyed the blog!!

Author: Mannu Kumar
Share: