Organization chart
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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Create simple Organization Chart.
<div id="simpleChartExample"></div>
const simpleChart = document.getElementById('simpleChartExample');
new OrganizationChart(simpleChart, {
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.
<div id="advancedChartExample"></div>
const advancedChart = document.getElementById('advancedChartExample');
new OrganizationChart(advancedChart, {
data: {
name: 'Walter White',
label: 'CIO',
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.
<div id="mixedChartExample"></div>
const mixedChart = document.getElementById('mixedChartExample');
new OrganizationChart(mixedChart, {
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 OrganizationChart from 'mdb-organization-chart';
@import '~mdb-organization-chart/css/organization-chart.min.css';
Usage
Via JavaScript
<div id="organizationChartExample"></div>
const organizationChart = document.getElementById('organizationChartExample');
new OrganizationChart(organizationChart, {
data: {
label: "MDB"
}
});
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<div id="organizationChartExample"></div>
$(document).ready(() => {
$('#organizationChartExample').organizationChart({
data: {
label: "MDB"
}
});
});
Options
Options can be passed via data JavaScript, or jQuery. Each option can be passed with value or
null.
| Name | Type | Default | Description |
|---|---|---|---|
data
|
Object | {} |
Pass data for the structure illustrated on the chart. At every level there should be name. Properties label, avatar and children are optional. |
switchHeaderText |
Boolean | false |
Switch the name with title in node (only for advanced charts). |
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
getInstance
|
element | Static method which allows to get the OrganizationChart instance associated with a DOM element. |
OrganizationChart.getInstance(element)
|
dispose
|
element | Disposes OrganizationChart instance. |
instance.dispose()
|
const orgChartElement = document.getElementById('organization-chart');
const instance = OrganizationChart.getInstance(orgChartElement);
instance.dispose();