Angular 13 Bar Chart Example | Angular 13 tutorial

Share the post

Hello All, This is the Angular 13 Bar Chart Example. In the last angular 13 tutorials, We had discussed How to implement Area Chart in angular 13.

In this angular 13 example, We will try to show students marks in the form of a bar chart. So, you will get an idea of How to implement a bar chart in the angular 13 application.

Steps for Angular 13 Bar Chart Example

  • Step1: Create Angular Project
  • Step2: Import Ng2GoogleChartsModule
  • Step3: Update Template
  • Step4: Update TS Code
  • Step5: Run Angular Project

Step1: Create angular project

Create a new angular project in the windows machine using the following command.

ng new <APPNAME>

Now, move to our root project directory using the following command

cd <APPNAME>

Open the newly created angular project in Visual Studio Code. Use the following command to open the project.

code .

Step2: Import Ng2GoogleChartsModule

Now, We need to install the required module dependency using the following command

npm i --save ng2-google-charts

Import the Ng2GoogleChartsModule in app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    Ng2GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step3: Update Template

Now, We have to update app.component.html as shown below

<google-chart
  [data]="barChart"
>
</google-chart>

Step4: Update TS Code

We will write the code in our TypeScript file. Update the app.component.ts file as shown below.

import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {


  constructor() {

  }

  barChart: GoogleChartInterface = {
    chartType: GoogleChartType.BarChart,
    dataTable: [
      ['Student', 'Marks'],
      ['A', 80],
      ['B', 90],
      ['C', 88]
    ],
    options: { 'title': 'Student Marks' },
  };
}

In the above example, We are trying to show a bar chart of student marks.

Step5: Run Angular Project

To run the angular project using the below command.

ng serve

or use the below command

npm run start

See the output in http://localhost:4200/

Angular 13 Bar Chart Example
Angular 13 Bar Chart Example

Angular 13 Bar Chart Example

1 thought on “Angular 13 Bar Chart Example | Angular 13 tutorial”

Leave a Comment