Create dotted lines in an OrgChart

GoJS
1

Hi. I evaluate your diagram control. Actually we draw dotted lines in our existing diagram control. You can see it in the attached picture. Is it possible to draw a dotted line who start and end with an offset from the middle?

DottedLine
DottedLine930×491 21.9 KB

2

Dotted or dashed lines (depending on the length of the line segments) is controlled by the Shape.strokeDashArray property: Shape | GoJS API

  $(go.Shape, { strokeDashArray: [4, 2] })

Play with the numbers until you get the appearance you want.

Also, you can control whether a Shape, in your case the Link.path Shape, is dashed or not via some link data property by using a data Binding. Maybe something like:

    $(go.Shape,
        new go.Binding("strokeDashArray", "dotted", d => d ? [4, 2] : null))

where your link data could be something like:

    { from: 1, to: 2, dotted: true }
3

Hi. I would to know, how can I define the anchor start point and the anchor end point of a dotted line. You can see it in the attached picture, that the start and endpoint have an offset from the tree link line.

4

You can set or bind the Link.fromEndSegmentLength and/or Link.toEndSegmentLength to be a different value than 10. Although just setting/binding one might be good enough.

Should those links not be considered part of the tree structure? If that is the case, remember to set or bind Link.isTreeLink to false. And maybe also Part.isLayoutPositioned to false, if you don’t want it to have any effect on any layout. Org Chart Extras

5

Hi. Thank you for your help. I found a solution with the ‘EndSegmentLength’ properties and the ‘fromSpot’ and ‘toSpot’ property.