How To Create Google Combo Chart In Angular

In this post, you will discover how to add a Combo chart to Google Charts.

a chart that allows you to choose from the following marker types for each series: line, area, bar, candlestick, and stepped area.

Specify the series type attribute to give each series a default marker type. To specify the specific characteristics of each series, use the series property.

Step 1:

Create a New Application

ng new ComboChart

Step 2:

Install Following Package

npm install angular-google-charts

Step 3:

Include the GoogleChartsModule in your app. The module.ts file

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:

Insert the following code into your app.component.ts file.

import { Component, OnInit } from '@angular/core';
declare let google: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
    ngOnInit() {
    this.drawChart();
    
  }
  drawChart() {
    google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
      // Some raw data (not necessarily accurate)
      var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
        ['2004/05',  165,      938,         522,             998,           450,      614.6],
        ['2005/06',  135,      1120,        599,             1368,          288,      682],
        ['2006/07',  157,      1167,        987,             807,           397,      623],
      ]);
      var options = {
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line'}}
      };
      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  }
}

Step 5 :

Insert the following code into your app.component.html file

<div #chartDiv id="chart-div"></div>

Step 6:

Run your application

ng serve

Output: