BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Dual Reporting Structures ​

Organizational charts are a powerful tool for visualizing company hierarchy. Sometimes, however, employees have dual reporting relationships, which can be tricky to represent in a standard org chart. This blog post demonstrates how to use the OrgChart JS library to effectively visualize such scenarios, using dotted lines to indicate secondary reporting structures. We'll walk through a code example where Anahi Gordon, the QA Manager, reports to both the IT Director and the CEO.

Code iconEdit in BALKAN Code

The key to visualizing dual reporting lies in customizing the link between nodes. OrgChart allows you to define custom templates for different types of connections.

Here is the code snippet that creates a dotted template:

javascript
OrgChart.templates.dotted = Object.assign({}, OrgChart.templates.olivia);
OrgChart.templates.dotted.label =
  `<text ${OrgChart.attr.width}="135" class="olivia-f0" x="90" y="-35">{val}</text>`;

OrgChart.templates.dotted.defs =
  `<marker id="arrowdown" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="12" markerHeight="12" orient="auto-start-reverse">
    <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" />
  </marker>
  <marker id="arrowup" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="12" markerHeight="12" orient="auto-start-reverse"> 
    <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" />
  </marker>`;
OrgChart.templates.dotted.link =
  `<path marker-start="url(#arrowup)" marker-end="url(#arrowdown)" stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />`;

This snippet first creates a new template called dotted by copying the existing olivia template. It then customizes the label, defs, and link properties.

The defs section defines the arrow markers used at the start and end of the line. The link property defines the SVG path itself, including the arrow markers. The stroke property controls the line color, and stroke-width controls the thickness.

Add the CSS Used in the Demo ​

This demo also uses a small CSS rule to give the connector and related node outline a dashed orange style:

css
.link.boc-dotted-connector path, .node.boc-dotted-connector rect {
  stroke-dasharray: 7;
  stroke: #F57C00;
}

This styling helps the secondary reporting line stand out visually from the standard hierarchy.

Create the Organization Chart and Define Dotted Lines ​

javascript
var chart = new OrgChart(document.getElementById("tree"), {
  template: "olivia",
  mouseScrool: OrgChart.action.ctrlZoom,
  enableSearch: false,
  dottedLines: [
    { from: 5, to: 1, tags: ["dotted"] },
  ],
  tags: {
    "dotted": {
      template: "dotted"
    }
  },
  nodeBinding: {
    field_0: "name",
    field_1: "title",
    img_0: "img",
    label: "label"
  },
});

Here, dottedLines is an array of objects. Each object defines a dotted line. from and to specify the IDs of the connected nodes. tags associates the dotted line with the custom template we created earlier. The tags object then maps the dotted tag to the dotted template.

Load the Data ​

Finally, load the employee data:

javascript
chart.load([
  { id: 1, name: "Jack Hill", title: "CEO", email: "amber@domain.com", img: "https://cdn.balkan.app/shared/a/1.jpg" },
  { id: 2, pid: 1, name: "Lexie Cole", title: "Sales Director", email: "ava@domain.com", img: "https://cdn.balkan.app/shared/a/2.jpg" },
  { id: 3, pid: 1, name: "Aaliyah Webb", title: "IT Director", email: "jay@domain.com", img: "https://cdn.balkan.app/shared/a/4.jpg" },
  { id: 4, pid: 3, name: "Elliot Ross", title: "Dev Team Lead", img: "https://cdn.balkan.app/shared/a/5.jpg" },
  { id: 5, pid: 3, name: "Anahi Gordon", title: "QA Manager", label: "my label", img: "https://cdn.balkan.app/shared/a/6.jpg" }
]);

Notice that Anahi Gordon (id: 5) reports to the IT Director (id: 3) through the standard hierarchical structure defined by the pid property. The dottedLines array then establishes a secondary reporting relationship to the CEO (id: 1).

Why This Works Well for Matrix Structures ​

By using this approach, you can clearly visualize complex reporting structures in your organizational charts, making them more informative and easier to understand.

This is especially useful for representing matrix management or other scenarios where individuals have multiple reporting lines. Remember to include the OrgChart JS library in your project for this code to work.