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.

Setting up the Dotted Line Template

Here is the Code demo

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's the code snippet that creates a "dotted" template:

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 code snippet first creates a new template called dotted by copying the existing olivia template. Then, it customizes the label, defs, and link properties. The defs section defines the arrow markers used at the start and end of the dotted line. The link property defines the path of the dotted line itself, including the arrow markers. The stroke property controls the color of the line, and stroke-width controls the thickness.

Creating the Organization Chart and Defining Dotted Lines

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 nodes connected by the dotted line. tags is used to associate the dotted line with the custom template we created earlier. The tags object then links the "dotted" tag to the dotted template.

Loading the Data

Finally, we load the employee data:

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 (parent ID) property. The dottedLines array then establishes a secondary reporting relationship to the CEO (id: 1).

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 library in your project for this code to work.

Here is the Code demo