YogeshChauhan . com

How to add a Bar Chart in Angular App?

in Angular on June 13, 2020

There are few plugins available to add Bar Chart in Angular App.

In this article, I am going to use ng2-charts, which is an open-source JS library, and it is exclusively built for Angular 2 and later versions. I have tested the code and it works for Angular 9.

It is easily installable via npm and creates really amazing charts in few minutes.

The ng2-charts supports Chart.js.

Let’s make an app with just Bar Chart so that it will be easily understandable.

Step 1

//make new angular app

ng new bar-chart-app

Step 2

// go inside app folder

cd bar-chart-app

Step 3

// create angular component 

ng g c bar-chart

where g c stands for globally create, in case if you don’t know smiley

Step 4

// install ng2-charts and Chart js via npm

npm install ng2-charts chart.js --save

Step 5

This is an important step and you must have done it many times. After you create a new component and add a module, you need to import it to app.module.ts file.

Import ChartsModule like this example code.

import { ChartsModule } from 'ng2-charts';

  declarations: [...],
  imports: [
  providers: [...],
  bootstrap: [...]

export class AppModule { }

Step 6

Go to bar-chart.component.ts file and add the code below.

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']

export class BarChartComponent {

  barChartOptions: ChartOptions = {
    responsive: true,
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];  
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }

  constructor() { }

  ngOnInit() {

Step 7

Go to bar-chart.component.html file and add this code:

<div style="display: block;">
  <canvas baseChart

Open the app in browser, it should look like this:

Angular Bar Chart - Yogesh Chauhan's Blog
Angular Bar Chart

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

HTML canvas methodsHTMLHow to add a Line Chart in Angular App?AngularWindow innerHeight and innerWidth properties in JavaScriptJavaScriptHow to change perception and behavior of a person for acceptance of new systems?MiscWordPress: How to get field values in Advanced Custom Fields?WordPressPHP arrays for US states’ full names and abbreviationsPHP