Bar Chart Example With Angular 9 Using ng2-charts

3 min readJun 28, 2020

This tutorial help to implement chart.js into angular 9 application.The Chart is a graphical representation of data, in which “the data is represented by symbols like line, bar slices etc”.I will demonstrate bar chart integration with angular 9, But you can implement any chart type option Like pie, radar, line, doughnut and bubble charts with this angular 9.

I have already shared tutoria Angular 6 Chart Tutorial using Chart.js.

What is Chart.js?

Chart.Js is a popular and powerful JavaScript chart library, It is used HTML5 canvas to represent the data as pictorial manner.You can pass the data in json format. It allows us to build dynamic as well as static charts with animation.

What is ng2-charts

The ng2-charts npm module is an open-source JavaScript library which is created over chart.js.Its a angular 2+ wrapper libs for chart.js.

The ng2-charts allows 8 types of charts with it, such as: pie, bar, line, radar, polar area, doughnut, bubble and scatter.

ng2-chart Properties

These properties are same as chart.js core library defined in documentation, They are just extending those properties and used into directive.

data (Array | number[]) — set of points of the chart, it should be Array only for line, bar and radar, otherwise number[].
datasets (Array | number[], label: string}>) — data see about, the label for the dataset which appears in the legend and tooltips.
labels (?Array) — x axis labels. It’s necessary for charts: line, bar and radar. And just labels (on hover) for charts: polarArea, pie and doughnut.
chartType (?string) — indicates the type of charts, it can be: line, bar, radar, pie, polarArea, doughnut.
options (?any) — chart options (as from Chart.js documentation).
colors (?Array) — data colors, will use default and|or random colors if not specified (see below).
legend: (?boolean=false) — if true show legend below the chart, otherwise not be shown.

ng2-chart Events

There are two type events available into ng2-chart libs, You can catch click and hover event of any chart.

chartClick: This event triggered, when user has been click on a chart.This method returns information regarding active points and labels.
chartHover: This event triggered, when mousemove (hover) on a chart has occurred. This method returns information regarding active points and labels.

Bar Chart Example Using ng2-charts

A bar chart is a popular chart option to create graphical representation of the data.You can represent data in rectangular bars displayed values are proportionate to the heights or length of the values defined.

Set up Angular Project

Install and setup Angular project by running the following command.

Next, get inside the project folder.

cd ng-charts-app

How To install dependencies

Now, I ll install ng2-charts and Chart js libraries via npm in Angular 8/9 project. We will use ng2-charts along with the Chart js library in our Angular application to show the various charts.

npm install ng2-charts chart.js --save

The above command will install both the packages and save the entries inside the package.json file.

Next, import ChartsModule into the app.module.ts file.

Go to app.component.ts file and add the given below code.

Run Angular 9 Application

Let’s run angular application using below command -
ng serve

Open development server http://localhost:4200 on browse, Your result must look like this:

Click on the below button to get the full code from my GitHub repo:

Conclusion

I have integrated Bar chart with Angular 8/9 through ng2-charts.The chart.js and ng2-charts is very easy to integrate in an Angular app. I hope it will help you to show various data using given chart.js.

Originally published at https://www.js-tutorials.com on June 28, 2020.