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

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

Then you cam change the CSS of the nodes:

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

Dotted Line Example

templates

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

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

Dotted Line Templates

css

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

.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;
    }
}

Dotted Line CSS

children

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

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

Dotted Line Children

groups

You can define dotted line groups:

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