# diagram-organization-chart

> Organization chart arranges local employee data in a horizontal hierarchy.

**Framework:** vue  **Component:** Diagram  **Variant:** organization-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/diagram-organization-chart.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-data @syncfusion/ej2-vue-buttons @syncfusion/ej2-vue-diagrams @syncfusion/ej2-vue-inputs
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-organization-chart/Diagram.vue

```vue
<template>
<div class="diagram-organization">
 <div class="col-lg-8 control-section">
    <div class="content-wrapper">
        <ejs-diagram style='display:block' ref="diagramObj" id="diagram" :width='width' :height='height' :snapSettings='snapSettings' :tool='tool' :layout='layout' :getNodeDefaults='getNodeDefaults' :getConnectorDefaults='getConnectorDefaults' :dataSourceSettings='dataSourceSettings'></ejs-diagram>
    </div>
</div>
</div>
</template>

<script>
import {
  DiagramComponent,
  Diagram,
  LayoutAnimation,
} from "@syncfusion/ej2-vue-diagrams";
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { DiagramTools } from "@syncfusion/ej2-vue-diagrams";
import {
  Node,
  DataBinding,
  HierarchicalTree,
  SnapConstraints
} from "@syncfusion/ej2-diagrams";
import { DataManager } from "@syncfusion/ej2-data";

let diagramInstance;
let orientation;
let type;
let horizontalSpacing;
let verticalSpacing;
let orientationObj;
let patternObj;
let checkBoxObj;

const localBindData = [
    { Id: "parent", Role: "Board", color: "#71AF17" },
    {
        Id: "1",
        Role: "General Manager",
        Manager: "parent",
        ChartType: "right",
        color: "#71AF17"
    },
    {
        Id: "11",
        Role: "Assistant General Manager",
        Manager: "1",
        color: "#71AF17"
    },
    {
        Id: "2",
        Role: "Human Resource Manager",
        Manager: "1",
        ChartType: "right",
        color: "#1859B7"
    },
    { Id: "3", Role: "Trainers", Manager: "2", color: "#2E95D8" },
    { Id: "4", Role: "Recruiting Team", Manager: "2", color: "#2E95D8" },
    { Id: "5", Role: "Finance Asst. Manager", Manager: "2", color: "#2E95D8" },
    {
        Id: "6",
        Role: "Design Manager",
        Manager: "1",
        ChartType: "right",
        color: "#1859B7"
    },
    { Id: "7", Role: "Design Supervisor", Manager: "6", color: "#2E95D8" },
    { Id: "8", Role: "Development Supervisor", Manager: "6", color: "#2E95D8" },
    { Id: "9", Role: "Drafting Supervisor", Manager: "6", color: "#2E95D8" },
    {
        Id: "10",
        Role: "Operations Manager",
        Manager: "1",
        ChartType: "right",
        color: "#1859B7"
    },
    { Id: "11", Role: "Statistics Department", Manager: "10", color: "#2E95D8" },
    { Id: "12", Role: "Logistics Department", Manager: "10", color: "#2E95D8" },
    {
        Id: "16",
        Role: "Marketing Manager",
        Manager: "1",
        ChartType: "right",
        color: "#1859B7"
    },
    { Id: "17", Role: "Overseas Sales Manager", Manager: "16", color: "#2E95D8" },
    { Id: "18", Role: "Petroleum Manager", Manager: "16", color: "#2E95D8" },
    {
        Id: "20",
        Role: "Service Department Manager",
        Manager: "16",
        color: "#2E95D8"
    },
    {
        Id: "21",
        Role: "Quality Control Department",
        Manager: "16",
        color: "#2E95D8"
    }
];

export default {
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-numerictextbox': NumericTextBoxComponent,
    'ejs-checkbox': CheckBoxComponent
  },
  data: function() {
    return {
      width: "100%",
      height: "700px",
      snapSettings: { constraints: SnapConstraints.None },
      //configures data source settings
      dataSourceSettings: {
        id: "Id",
        parentId: "Manager",
        dataSource: new DataManager(localBindData),
        doBinding: (nodeModel, data, diagram) => {
          nodeModel.shape = {
            type: "Text",
            content: (data).Role,
            margin: { left: 10, right: 10, top: 10, bottom: 10 }
          };
        }
      },
      //Disables all interactions except zoom/pan
      tool: DiagramTools.ZoomPan,
      //Configures automatic layout
      layout: {
        type: "OrganizationalChart",
        getLayoutInfo: (node, options) => {
          /* tslint:disable:no-string-literal */
          if (
            (node.data)["Role"] === "General Manager" &&
            options.assistants &&
            options.children
          ) {
            options.assistants.push(options.children[0]);
            options.children.splice(0, 1);
          }
          if (!options.hasSubTree) {
            options.type = "Right";
          }
        }
      },
      //Defines the default node and connector properties
      getNodeDefaults: (obj,diagram) => {
        /* tslint:disable:no-string-literal */
        return nodeDefaults(obj, diagram);
      },
      getConnectorDefaults: (connector, diagram) => {
        return connectorDefaults(connector, diagram);
      },

      horizontalSpacingMinimum: 20,
      horizontalSpacingMaximum: 60,
      horizontalSpacingStep: 2,
      horizontalSpacingValue: 30,
      //Increase or decrease horizontalSpacing of the layout
      horizontalSpacingChange: () => {
        diagramInstance.layout.horizontalSpacing = Number(horizontalSpacing.value);
        diagramInstance.dataBind();
      },

      verticalSpacingMinimum: 20,
      verticalSpacingMaximum: 60,
      verticalSpacingStep: 2,
      verticalSpacingValue: 30,
      //Increase or decrease verticalSpacing of the layout
      verticalSpacingChange: () => {
        diagramInstance.layout.verticalSpacing = Number(verticalSpacing.value);
        diagramInstance.dataBind();
      },

      checkedlabel: "Expandable",
      checkedchecked: false,
      checkedchange: () => {
        for (let node of diagramInstance.nodes) {
          if (checkBoxObj.checked) {
            node.expandIcon.shape = "Minus";
            node.collapseIcon.shape = "Plus";
          } else {
            node.expandIcon.shape = "None";
            node.collapseIcon.shape = "None";
          }
        }
        diagramInstance.dataBind();
        diagramInstance.doLayout();
      }
    };
  },
  provide: {
    diagram: [DataBinding, HierarchicalTree, LayoutAnimation]
  },
  mounted: function() {
    diagramInstance = this.$refs.diagramObj.ej2Instances;
    horizontalSpacing = this.$refs.horizontalSpacingObj?.ej2Instances;
    verticalSpacing = this.$refs.verticalSpacingObj?.ej2Instances;
    checkBoxObj = this.$refs.checkedObj?.ej2Instances;
    orientationObj = this.$refs.orientation;
    patternObj = this.$refs.pattern;

    // The current template only renders the diagram, so property-panel refs
    // may be absent and should not be wired up in that case.
    if (!orientationObj || !patternObj) {
      return;
    }

    //Click Event for orientation of the PropertyPanel.
    orientationObj.onclick = (args) => {
      let target = args.target;
      let selectedElement = document.getElementsByClassName(
        "e-selected-orientation-style"
      );
      if (selectedElement.length) {
        selectedElement[0].classList.remove("e-selected-orientation-style");
      }
      if (!target.classList.contains("e-selected-orientation-style")) {
        target.classList.add("e-selected-orientation-style");
      }
      if (
        target.className === "image-pattern-style e-selected-orientation-style"
      ) {
          let id = target.id;
          let orientation1 = id.substring(0, 1).toUpperCase()+id.substring(1,id.length);
          diagramInstance.layout.orientation = orientation1;
          diagramInstance.dataBind();
          diagramInstance.doLayout();
      }
    };
    //Click Event for pattern of the PropertyPanel.
    patternObj.onclick = (args) => {
      let target = args.target;
      let selectedpatternElement = document.getElementsByClassName(
        "e-selected-pattern-style"
      );
      if (selectedpatternElement.length) {
        selectedpatternElement[0].classList.remove("e-selected-pattern-style");
      }
      if (!target.classList.contains("e-selected-pattern-style")) {
        target.classList.add("e-selected-pattern-style");
      }
      if (target.className === "image-pattern-style e-selected-pattern-style") {
        switch (target.id) {
          case "pattern1":
            orientation = "Vertical".toString();
            type = "Alternate";
            break;
          case "pattern2":
            orientation = "Vertical".toString();
            type = "Left";
            break;
          case "pattern3":
            orientation = "Vertical".toString();
            type = "Left";
            break;
          case "pattern4":
            orientation = "Vertical".toString();
            type = "Right";
            break;
          case "pattern5":
            orientation = "Vertical".toString();
            type = "Right";
            break;
          case "pattern6":
            orientation = "Horizontal".toString();
            type = "Balanced";
            break;
          case "pattern7":
            orientation = "Horizontal".toString();
            type = "Center";
            break;
          case "pattern8":
            orientation = "Horizontal".toString();
            type = "Left";
            break;
          case "pattern9":
            orientation = "Horizontal".toString();
            type = "Right";
            break;
          default:
            if (selectedpatternElement.length) {
              selectedpatternElement[0].classList.remove(
                "e-selected-pattern-style"
              );
            }
        }
        diagramInstance.layout.getLayoutInfo = (
          node,
          options
        ) => {
          if (target.id === "pattern4" || target.id === "pattern3") {
            options.offset = -50;
          }
          if (orientation) {
            getLayoutInfo(node, options, orientation, type);
          }
        };

        diagramInstance.dataBind();
        diagramInstance.doLayout();
      }
    };
  }
}

//set orientation and type of the Layout.
function getLayoutInfo(
  node,
  options,
  orientation,
  type
) {
  /* tslint:disable:no-string-literal */
  if (
    (node.data)["Role"] === "General Manager" &&
    options.assistants &&
    options.children
  ) {
    options.assistants.push(options.children[0]);
    options.children.splice(0, 1);
  }
  if (!options.hasSubTree) {
    options.orientation = orientation;
    options.type = type;
  }
}

//sets default value for Node.
function nodeDefaults(obj, diagram) {
  obj.backgroundColor = (obj.data).color;
  obj.style = { fill: "none", strokeColor: "none", color: "white" };
  obj.expandIcon = {
    height: 10,
    width: 10,
    shape: "None",
    fill: "lightgray",
    offset: { x: 0.5, y: 1 }
  };
  obj.expandIcon.verticalAlignment = "Center";
  obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
  obj.collapseIcon = { height: 10, width: 10, shape: "None", fill: "lightgray", offset: { x: 0.5, y: 1 }}
  obj.collapseIcon.verticalAlignment = "Center";
  obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
  obj.width = 120;
  obj.height = 30;
  return obj;
}

//sets default value for Connector.
function connectorDefaults(
  connector,
  diagram
) {
  if (connector.targetDecorator) connector.targetDecorator.shape = "None";
  connector.type = "Orthogonal";
  connector.constraints = 0;
  connector.cornerRadius = 0;
  return connector;
}
</script>

```

### src/components/diagram-organization-chart/DiagramView.vue

```vue
<template>
  <Diagram />
</template>

<script setup>
import Diagram from '../../components/Diagram.vue'
</script>
```