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