Angular Google Charts - Organization Charts

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

Result

Verify the result.