Show / Hide Table of Contents

Dotted lines

If an employee has a dotted line manager it means that, in addition to reporting to their direct manager, they also report indirectly to a secondary manager or supervisor (who may be in another team).

Here is an example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
        dottedLines: [
            { from: 5, to: 1 },
        ],
    }); 
    

Here is how to change the template for the dotted line nodes:

 
    dottedLines: [
        { from: 5, to: 1, tags: ["ula"] },
    ],
    tags: {
        "ula": {
            template: "ula"
        }
    },
    

Here is how to change the CSS for the dotted line nodes:

 
    .link.boc-dotted-connector path, .node.boc-dotted-connector rect{
        stroke-dasharray: 5;           
        stroke: rgb(255, 202, 40); 
    }
    

You can use rootId to add children to dotted line nodes:

 
    dottedLines: [
        { from: 5, to: 1 },
        { from: 4, to: 5, rootId: 1 },
    ],
    

You can define dotted line groups:

 
    groupDottedLines: [
        { from: 5, to: 2 }
    ],
    ...
    tags: {
        "group-dotted-lines": {
            min: false,
            template: "group_dotted_lines"
        }
    }