Angular Google Bar Chart Example

Angular Google Bar Chart :

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. Get started Chart Gallery. insert_chart Rich Gallery Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.

This instructional exercise shows you Angular google bar graph model. it’s straightforward illustration of Angular google bar graph npm. This post will give you straightforward illustration of Angular precise google-graphs google bar diagram . Here you will figure out how to add google bar graph in Angular .

you can without much of a stretch add google programming interface bar graph in Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 and Angular 12 form application.

In this model we will utilize Angular google-graphs npm bundle to make google programming interface bar outline model in Angular 11 application. we will essentially introduce that Angular google-graphs npm bundle and use GoogleChartsModule module to make code.

Along these lines, we should see cry step and get qr code as like roar screen capture:

Step 1: Create New App

ng new myNewApp

Step 2: Install angular-google-charts npm Package

Add angular-google-charts in our angular application by using following command.

npm install angular-google-charts

Step 3: Import GoogleChartsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  chartData = {
      type: 'BarChart',
      data: [
      ["Pendrive",  500],
      ["Hard Disk",  800],
      ["Charger",  400],
   ],
   chartColumns: ['Sweets', 'Sell'],
   width: 1000,
   height: 400
  };
     
}

Step 5: Update HTML File

<google-chart 
    [type]="chartData.type" 
    [data]="chartData.data" 
    [columns]="chartData.chartColumns" 
    [width]="chartData.width"
    [height]="chartData.height">     
</google-chart>

Now run your application using the following command

ng serve

 

Tags: AngularBar ChartGoogle ChartsHTMLSetup