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