Organization chart

Angular Bootstrap 5 Organization chart plugin

Responsive family tree chart built with the latest Bootstrap 5. Organize data with a branching visualization.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create simple Organization Chart.

        
            
        <mdb-organization-chart [data]="data"></mdb-organization-chart>
        
        
    
        
            
        import { Component } from '@angular/core';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss'],
        })
        export class AppComponent {
          data = {
            label: 'CEO',
            children: [
              {
                label: 'Director',
                children: [
                  { label: 'Manager', children: [{ label: 'Employee' }] },
                  {
                    label: 'Manager',
                    children: [{ label: 'Employee' }, { label: 'Employee' }],
                  },
                ],
              },
              {
                label: 'Director',
                children: [
                  {
                    label: 'Manager',
                    children: [{ label: 'Employee' }, { label: 'Employee' }],
                  },
                  { label: 'Manager', children: [{ label: 'Employee' }] },
                ],
              },
            ],
          };
        }

Advanced example

Create organization chart including avatar and name.

        
            
        <mdb-organization-chart [data]="data"></mdb-organization-chart>
        
        
    
        
            
        import { Component } from '@angular/core';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss'],
        })
        export class AppComponent {
          data = {
            name: 'Walter White',
            label: 'CEO',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
            children: [
              {
                label: 'Manager',
                name: 'Jon Snow',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
                children: [
                  {
                    label: 'SE',
                    name: 'Britney Morgan',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
                  },
                ],
              },
              {
                label: 'Director',
                name: 'Jimmy McGill',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
                children: [
                  {
                    label: 'PM',
                    name: 'Phoebe Buffay',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/7.webp',
                    children: [
                      {
                        label: 'Operations',
                        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/4.webp',
                        name: 'Kim Wexler',
                      },
                      {
                        label: 'Development',
                        name: 'Rachel Green',
                        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/6.webp',
                      },
                    ],
                  },
                ],
              },
              {
                label: 'Manager',
                name: 'Michael Scott',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/8.webp',
                children: [
                  {
                    label: 'SA',
                    name: 'Pam Beasly',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
                  },
                  {
                    label: 'SP',
                    name: 'Alex Morgan',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/14.webp',
                  },
                ],
              },
              {
                label: 'R&D',
                name: 'Fran Kirby',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
              },
            ],
          };
        }

Mixed example

Create mixed organization chart.

        
            
        <mdb-organization-chart [data]="data"></mdb-organization-chart>
        
        
    
        
            
        import { Component } from '@angular/core';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss'],
        })
        export class AppComponent {
          data = {
            name: 'Walter White',
            label: 'CEO',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
            children: [
              {
                name: 'Jon Snow',
                label: 'CFO',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
                children: [
                  {
                    label: 'Analysis',
                  },
                  {
                    label: 'Sales',
                  },
                ],
              },
              {
                label: 'CMO',
                name: 'Kim Wexler',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
                children: [
                  {
                    label: 'Marketing',
                  },
                ],
              },
              {
                label: 'CIO',
                name: 'Phoebe Buffay',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
                children: [
                  {
                    label: 'Development',
                    name: 'Chandler Bing',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
                    children: [
                      {
                        label: 'Analysis',
                      },
                      {
                        label: 'Front End',
                      },
                      {
                        label: 'Back End',
                      },
                    ],
                  },
                  {
                    label: 'QA',
                    name: 'Rachel Green',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
                  },
                  {
                    label: 'R&D',
                    name: 'Monica Geller',
                    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/11.webp',
                  },
                ],
              },
            ],
          };
        }

Organization chart - API

Import

        
            
      import { MdbOrganizationChartModule } from 'mdb-angular-organization-chart';
      …
      @NgModule ({
        ...
        imports: [MdbOrganizationChartModule],
        ...
      })

Inputs

Name Type Default Description
data Object - Data for chart construction.
switchHeaderText Boolean false Switch the name with title in node (only for advanced charts).