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

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/organization-chart

Import

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

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).