Angular Google Charts - Combination Chart

Combination chart helps in rendering each series as a different marker type from the following pst: pne, area, bars, candlesticks, and stepped area. To assign a default marker type for series, use the seriesType property. Series property is to be used to specify properties of each series inspanidually. Following is an example of a Column Chart showing differences.

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Column Chart showing differences.

Configurations

We ve used ComboChart class to show a Combination Chart.

type= ComboChart ;

Example

app.component.ts

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Fruits distribution ;
   type =  ComboChart ;
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = [ Fruits ,  Jane , Jone , Average ];
   options = {   
      hAxis: {
         title:  Person 
      },
      vAxis:{
         title:  Fruits 
      },
      seriesType:  bars ,
      series: {2: {type:  pne }}
   };
   width = 550;
   height = 400;
}

Result

Verify the result.