Following is an example of a Organization Chart.

Organization chart helps in rendering a hierarchy of nodes, used to portray superior/subordinate relationships in an organization. For example, A family tree is a type of org chart. 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 Organization Chart.

Configurations

We”ve used OrgChart class to show a Organization Chart.

type=''OrgChart'';

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 = '''';
   type = ''OrgChart'';
   data = [
      [{v:''Mike'', f:''Mike<div style="color:red; font-style:italic">President</div>''},
         '''', ''The President''],
      [{v:''Jim'', f:''Jim<div style="color:red; font-style:italic">Vice President</div>''},
         ''Mike'', ''VP''],
      [''Alice'', ''Mike'', ''''],
      [''Bob'', ''Jim'', ''Bob Sponge''],
      [''Carol'', ''Bob'', '''']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

Result

Verify the result.