Combination chart helps in rendering each series as a different marker type from the following list: line, 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 individually. 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: ''line''}}
   };
   width = 550;
   height = 400;
}

Result

Verify the result.