{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-organization-chart",
  "framework": "vue",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "organization-chart",
  "dependencies": [
    "@syncfusion/ej2-data",
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-diagrams",
    "@syncfusion/ej2-vue-inputs"
  ],
  "description": "Organization chart arranges local employee data in a horizontal hierarchy.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/diagram-organization-chart.md"
  },
  "files": [
    {
      "target": "src/components/diagram-organization-chart/Diagram.vue",
      "content": "<template>\n<div class=\"diagram-organization\">\n <div class=\"col-lg-8 control-section\">\n    <div class=\"content-wrapper\">\n        <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>\n    </div>\n</div>\n</div>\n</template>\n\n<script>\nimport {\n  DiagramComponent,\n  Diagram,\n  LayoutAnimation,\n} from \"@syncfusion/ej2-vue-diagrams\";\nimport { CheckBoxComponent } from \"@syncfusion/ej2-vue-buttons\";\nimport { NumericTextBoxComponent } from \"@syncfusion/ej2-vue-inputs\";\nimport { DiagramTools } from \"@syncfusion/ej2-vue-diagrams\";\nimport {\n  Node,\n  DataBinding,\n  HierarchicalTree,\n  SnapConstraints\n} from \"@syncfusion/ej2-diagrams\";\nimport { DataManager } from \"@syncfusion/ej2-data\";\n\nlet diagramInstance;\nlet orientation;\nlet type;\nlet horizontalSpacing;\nlet verticalSpacing;\nlet orientationObj;\nlet patternObj;\nlet checkBoxObj;\n\nconst localBindData = [\n    { Id: \"parent\", Role: \"Board\", color: \"#71AF17\" },\n    {\n        Id: \"1\",\n        Role: \"General Manager\",\n        Manager: \"parent\",\n        ChartType: \"right\",\n        color: \"#71AF17\"\n    },\n    {\n        Id: \"11\",\n        Role: \"Assistant General Manager\",\n        Manager: \"1\",\n        color: \"#71AF17\"\n    },\n    {\n        Id: \"2\",\n        Role: \"Human Resource Manager\",\n        Manager: \"1\",\n        ChartType: \"right\",\n        color: \"#1859B7\"\n    },\n    { Id: \"3\", Role: \"Trainers\", Manager: \"2\", color: \"#2E95D8\" },\n    { Id: \"4\", Role: \"Recruiting Team\", Manager: \"2\", color: \"#2E95D8\" },\n    { Id: \"5\", Role: \"Finance Asst. Manager\", Manager: \"2\", color: \"#2E95D8\" },\n    {\n        Id: \"6\",\n        Role: \"Design Manager\",\n        Manager: \"1\",\n        ChartType: \"right\",\n        color: \"#1859B7\"\n    },\n    { Id: \"7\", Role: \"Design Supervisor\", Manager: \"6\", color: \"#2E95D8\" },\n    { Id: \"8\", Role: \"Development Supervisor\", Manager: \"6\", color: \"#2E95D8\" },\n    { Id: \"9\", Role: \"Drafting Supervisor\", Manager: \"6\", color: \"#2E95D8\" },\n    {\n        Id: \"10\",\n        Role: \"Operations Manager\",\n        Manager: \"1\",\n        ChartType: \"right\",\n        color: \"#1859B7\"\n    },\n    { Id: \"11\", Role: \"Statistics Department\", Manager: \"10\", color: \"#2E95D8\" },\n    { Id: \"12\", Role: \"Logistics Department\", Manager: \"10\", color: \"#2E95D8\" },\n    {\n        Id: \"16\",\n        Role: \"Marketing Manager\",\n        Manager: \"1\",\n        ChartType: \"right\",\n        color: \"#1859B7\"\n    },\n    { Id: \"17\", Role: \"Overseas Sales Manager\", Manager: \"16\", color: \"#2E95D8\" },\n    { Id: \"18\", Role: \"Petroleum Manager\", Manager: \"16\", color: \"#2E95D8\" },\n    {\n        Id: \"20\",\n        Role: \"Service Department Manager\",\n        Manager: \"16\",\n        color: \"#2E95D8\"\n    },\n    {\n        Id: \"21\",\n        Role: \"Quality Control Department\",\n        Manager: \"16\",\n        color: \"#2E95D8\"\n    }\n];\n\nexport default {\n  components: {\n    'ejs-diagram': DiagramComponent,\n    'ejs-numerictextbox': NumericTextBoxComponent,\n    'ejs-checkbox': CheckBoxComponent\n  },\n  data: function() {\n    return {\n      width: \"100%\",\n      height: \"700px\",\n      snapSettings: { constraints: SnapConstraints.None },\n      //configures data source settings\n      dataSourceSettings: {\n        id: \"Id\",\n        parentId: \"Manager\",\n        dataSource: new DataManager(localBindData),\n        doBinding: (nodeModel, data, diagram) => {\n          nodeModel.shape = {\n            type: \"Text\",\n            content: (data).Role,\n            margin: { left: 10, right: 10, top: 10, bottom: 10 }\n          };\n        }\n      },\n      //Disables all interactions except zoom/pan\n      tool: DiagramTools.ZoomPan,\n      //Configures automatic layout\n      layout: {\n        type: \"OrganizationalChart\",\n        getLayoutInfo: (node, options) => {\n          /* tslint:disable:no-string-literal */\n          if (\n            (node.data)[\"Role\"] === \"General Manager\" &&\n            options.assistants &&\n            options.children\n          ) {\n            options.assistants.push(options.children[0]);\n            options.children.splice(0, 1);\n          }\n          if (!options.hasSubTree) {\n            options.type = \"Right\";\n          }\n        }\n      },\n      //Defines the default node and connector properties\n      getNodeDefaults: (obj,diagram) => {\n        /* tslint:disable:no-string-literal */\n        return nodeDefaults(obj, diagram);\n      },\n      getConnectorDefaults: (connector, diagram) => {\n        return connectorDefaults(connector, diagram);\n      },\n\n      horizontalSpacingMinimum: 20,\n      horizontalSpacingMaximum: 60,\n      horizontalSpacingStep: 2,\n      horizontalSpacingValue: 30,\n      //Increase or decrease horizontalSpacing of the layout\n      horizontalSpacingChange: () => {\n        diagramInstance.layout.horizontalSpacing = Number(horizontalSpacing.value);\n        diagramInstance.dataBind();\n      },\n\n      verticalSpacingMinimum: 20,\n      verticalSpacingMaximum: 60,\n      verticalSpacingStep: 2,\n      verticalSpacingValue: 30,\n      //Increase or decrease verticalSpacing of the layout\n      verticalSpacingChange: () => {\n        diagramInstance.layout.verticalSpacing = Number(verticalSpacing.value);\n        diagramInstance.dataBind();\n      },\n\n      checkedlabel: \"Expandable\",\n      checkedchecked: false,\n      checkedchange: () => {\n        for (let node of diagramInstance.nodes) {\n          if (checkBoxObj.checked) {\n            node.expandIcon.shape = \"Minus\";\n            node.collapseIcon.shape = \"Plus\";\n          } else {\n            node.expandIcon.shape = \"None\";\n            node.collapseIcon.shape = \"None\";\n          }\n        }\n        diagramInstance.dataBind();\n        diagramInstance.doLayout();\n      }\n    };\n  },\n  provide: {\n    diagram: [DataBinding, HierarchicalTree, LayoutAnimation]\n  },\n  mounted: function() {\n    diagramInstance = this.$refs.diagramObj.ej2Instances;\n    horizontalSpacing = this.$refs.horizontalSpacingObj?.ej2Instances;\n    verticalSpacing = this.$refs.verticalSpacingObj?.ej2Instances;\n    checkBoxObj = this.$refs.checkedObj?.ej2Instances;\n    orientationObj = this.$refs.orientation;\n    patternObj = this.$refs.pattern;\n\n    // The current template only renders the diagram, so property-panel refs\n    // may be absent and should not be wired up in that case.\n    if (!orientationObj || !patternObj) {\n      return;\n    }\n\n    //Click Event for orientation of the PropertyPanel.\n    orientationObj.onclick = (args) => {\n      let target = args.target;\n      let selectedElement = document.getElementsByClassName(\n        \"e-selected-orientation-style\"\n      );\n      if (selectedElement.length) {\n        selectedElement[0].classList.remove(\"e-selected-orientation-style\");\n      }\n      if (!target.classList.contains(\"e-selected-orientation-style\")) {\n        target.classList.add(\"e-selected-orientation-style\");\n      }\n      if (\n        target.className === \"image-pattern-style e-selected-orientation-style\"\n      ) {\n          let id = target.id;\n          let orientation1 = id.substring(0, 1).toUpperCase()+id.substring(1,id.length);\n          diagramInstance.layout.orientation = orientation1;\n          diagramInstance.dataBind();\n          diagramInstance.doLayout();\n      }\n    };\n    //Click Event for pattern of the PropertyPanel.\n    patternObj.onclick = (args) => {\n      let target = args.target;\n      let selectedpatternElement = document.getElementsByClassName(\n        \"e-selected-pattern-style\"\n      );\n      if (selectedpatternElement.length) {\n        selectedpatternElement[0].classList.remove(\"e-selected-pattern-style\");\n      }\n      if (!target.classList.contains(\"e-selected-pattern-style\")) {\n        target.classList.add(\"e-selected-pattern-style\");\n      }\n      if (target.className === \"image-pattern-style e-selected-pattern-style\") {\n        switch (target.id) {\n          case \"pattern1\":\n            orientation = \"Vertical\".toString();\n            type = \"Alternate\";\n            break;\n          case \"pattern2\":\n            orientation = \"Vertical\".toString();\n            type = \"Left\";\n            break;\n          case \"pattern3\":\n            orientation = \"Vertical\".toString();\n            type = \"Left\";\n            break;\n          case \"pattern4\":\n            orientation = \"Vertical\".toString();\n            type = \"Right\";\n            break;\n          case \"pattern5\":\n            orientation = \"Vertical\".toString();\n            type = \"Right\";\n            break;\n          case \"pattern6\":\n            orientation = \"Horizontal\".toString();\n            type = \"Balanced\";\n            break;\n          case \"pattern7\":\n            orientation = \"Horizontal\".toString();\n            type = \"Center\";\n            break;\n          case \"pattern8\":\n            orientation = \"Horizontal\".toString();\n            type = \"Left\";\n            break;\n          case \"pattern9\":\n            orientation = \"Horizontal\".toString();\n            type = \"Right\";\n            break;\n          default:\n            if (selectedpatternElement.length) {\n              selectedpatternElement[0].classList.remove(\n                \"e-selected-pattern-style\"\n              );\n            }\n        }\n        diagramInstance.layout.getLayoutInfo = (\n          node,\n          options\n        ) => {\n          if (target.id === \"pattern4\" || target.id === \"pattern3\") {\n            options.offset = -50;\n          }\n          if (orientation) {\n            getLayoutInfo(node, options, orientation, type);\n          }\n        };\n\n        diagramInstance.dataBind();\n        diagramInstance.doLayout();\n      }\n    };\n  }\n}\n\n//set orientation and type of the Layout.\nfunction getLayoutInfo(\n  node,\n  options,\n  orientation,\n  type\n) {\n  /* tslint:disable:no-string-literal */\n  if (\n    (node.data)[\"Role\"] === \"General Manager\" &&\n    options.assistants &&\n    options.children\n  ) {\n    options.assistants.push(options.children[0]);\n    options.children.splice(0, 1);\n  }\n  if (!options.hasSubTree) {\n    options.orientation = orientation;\n    options.type = type;\n  }\n}\n\n//sets default value for Node.\nfunction nodeDefaults(obj, diagram) {\n  obj.backgroundColor = (obj.data).color;\n  obj.style = { fill: \"none\", strokeColor: \"none\", color: \"white\" };\n  obj.expandIcon = {\n    height: 10,\n    width: 10,\n    shape: \"None\",\n    fill: \"lightgray\",\n    offset: { x: 0.5, y: 1 }\n  };\n  obj.expandIcon.verticalAlignment = \"Center\";\n  obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n  obj.collapseIcon = { height: 10, width: 10, shape: \"None\", fill: \"lightgray\", offset: { x: 0.5, y: 1 }}\n  obj.collapseIcon.verticalAlignment = \"Center\";\n  obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n  obj.width = 120;\n  obj.height = 30;\n  return obj;\n}\n\n//sets default value for Connector.\nfunction connectorDefaults(\n  connector,\n  diagram\n) {\n  if (connector.targetDecorator) connector.targetDecorator.shape = \"None\";\n  connector.type = \"Orthogonal\";\n  connector.constraints = 0;\n  connector.cornerRadius = 0;\n  return connector;\n}\n</script>\n"
    },
    {
      "target": "src/components/diagram-organization-chart/DiagramView.vue",
      "content": "<template>\n  <Diagram />\n</template>\n\n<script setup>\nimport Diagram from '../../components/Diagram.vue'\n</script>"
    }
  ]
}