Creating Organizational Charts with Multiple Parents Using Straight Links

Modern organizations often have complex reporting structures where employees report to multiple managers. Here's how to create org charts that handle these multi-parent relationships using straight connecting links.

Code example

Setup and Configuration

First, configure straight links and create custom templates:

// Enable straight links instead of curved
OrgChart.CLINK_CURVE = 0;

// Create green template for standard nodes
OrgChart.templates.green = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.green.size = [250, 100];
OrgChart.templates.green.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#e0ecdb" stroke-width="3" stroke="#aeaeae" rx="1" ry="1"></rect>';
OrgChart.templates.green.field_0 = '<text data-width="230" style="font-size: 20px;" font-weight="bold" fill="#6c7a69" x="25" y="45" text-anchor="start">{val}</text>';
OrgChart.templates.green.field_1 = '<text data-width="230" style="font-size: 18px;" fill="#6c7a69" x="25" y="80" text-anchor="start">{val}</text>';
OrgChart.templates.green.link = '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="3px" fill="none" d="{rounded}" />';

// Create red template for executives
OrgChart.templates.red = Object.assign({}, OrgChart.templates.green);
OrgChart.templates.red.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#fc2532" stroke-width="3" stroke="#aeaeae" rx="1" ry="1"></rect>';
OrgChart.templates.red.field_0 = '<text data-width="230" style="font-size: 20px;" font-weight="bold" fill="#e0ecdb" x="25" y="45" text-anchor="start">{val}</text>';

// Template for nodes that shouldn't show default parent links
OrgChart.templates.noLink = Object.assign({}, OrgChart.templates.green);
OrgChart.templates.noLink.link = "";

// Custom link template for multiple parent connections
OrgChart.clinkTemplates.simple = Object.assign({}, OrgChart.clinkTemplates.orange);
OrgChart.clinkTemplates.simple.link = '<path stroke="#aeaeae" stroke-width="3" fill="none" d="{d}" />';

Creating the Chart with Multiple Parents

let chart = new OrgChart(document.getElementById("tree"), {
    template: "green",
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    },
    tags: {
        "red": { template: "red" },
        "noLink": { template: "noLink" }
    },
    // Define multiple parent relationships
    clinks: [
        { from: 5, to: 1, template: "simple" }, // Elliot reports to Denny
        { from: 5, to: 9, template: "simple" }, // Elliot also connects to Cory
        { from: 4, to: 6, template: "simple" }, // Caden manages Lynn
        { from: 4, to: 7, template: "simple" }, // Caden manages Tanner
    ]
});

// Node data with traditional hierarchy (pid) and special tags
let nodes = [
    { id: 1, name: "Denny Curtis", title: "President", tags: ["red"] },
    { id: 2, name: "Nicky Phillips", title: "President", tags: ["red"] },
    { id: 3, name: "Ashley Barnett", title: "President" },
    { id: 4, pid: 1, name: "Caden Ellison", title: "Vice President Marketing" },
    { id: 5, pid: 2, name: "Elliot Patel", title: "Vice President Sales" },
    { id: 6, pid: 4, name: "Lynn Hussain", title: "Marketing Manager", tags: ["noLink"] },
    { id: 7, pid: 4, name: "Tanner May", title: "Marketing Manager", tags: ["noLink"] },
    { id: 8, pid: 5, name: "Fran Parsons", title: "Sales Manager" },
    { id: 9, pid: 3, name: "Cory Robbins", title: "Sales Manager" }
];

chart.load(nodes);

Key Concepts

Clinks: The clinks array creates additional connections beyond the standard parent-child (pid) relationships. This is another way of showing dotted-line reporting or matrix management structures.

NoLink Template: Use the noLink template on nodes where you want to suppress the default parent connection and only show custom clink connections.

Straight Lines: Setting OrgChart.CLINK_CURVE = 0 ensures all connecting lines are straight, creating cleaner visuals for complex reporting structures.

This approach lets you represent modern organizational complexities while maintaining visual clarity through straight, consistent connecting lines.

Multi Parents With Straight Clinks - OrgChart JS