DEV Community


Angular 8|9 Chart.js Tutorial with ng2-charts Examples

singhdigamber profile image Digamber Rawat Originally published at on ・1 min read

In this Angular 8/9 Chart tutorial, we will learn to implement Chart.js integration to represent data using various charts. We will learn to integrate pie, bar, radar, line, doughnut and bubble charts in an Angular app with the help of the ng2-charts module.

What is Chart.js?

Chart.Js is a well-recognized JavaScript library, and It is used to represent the data using the HTML5 canvas. It allows us to build dynamic as well as static charts, and it comes with full animation support for the various charts. It takes data in the JSON form, so it is merely simple to use it with any programming language.

Introduction to ng2-charts

The ng2-charts module is an open-source JavaScript library, and it is exclusively built for Angular 2+ and available via npm. It helps to create eye-catching charts in Angular with the help of Chart.js.

The ng2-charts supports Chart.js and comes with baseChart standard directive, and you can build 8 types of charts with it, such as: pie, bar, line, radar, polar area, doughnut, bubble and scatter.

click here to read more

Discussion (0)

Editor guide