Skip to content

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).

example

javascript
dottedLines: [
    { from: 5, to: 1 },
],

Then you cam change the CSS of the nodes:

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

templates

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

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

css

Here is a more complecs CSS example for the dotted line nodes:

css
.link.boc-dotted-connector path, .node.boc-dotted-connector rect{
    stroke-dasharray: 5;           
    stroke: #039BE5; 
    animation: dash1 5s linear alternate infinite;
}

@keyframes dash1 {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

children

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

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

groups

You can define dotted line groups:

javascript
groupDottedLines: [
    { from: 5, to: 2 }
],

tags: {
    "group-dotted-lines": {
        min: false,
        template: "group_dotted_lines"
    }
}