Questions about drawing in GoJS


I am evaluating GoJS component for my application.
I have few questions mentioned below.

1.How can I draw a line in GoJS which is half sold and half dotted?
2.Does GoJS provide “Before” events for draw and connect for lines? If not how can I implement these in GoJS?
3.How can I create and handle custom events for shapes and lines(connections) in GoJS? I need this for implementing business rules in my application.

Thanks in advance.


  1. Do you mean a line that is solid for half its length and then is dotted for the rest of its length? I cannot think of any trivial ways to declare this, but it should be possible to implement, particularly if there are specific assumptions being made. Could you provide a sketch showing all possible ways in which this would be used?

  2. Are you asking about drawing new Links? That is implemented by the LinkingTool, which offers a lot of control before, during, and after. What are you trying to do?

  3. If you could be more specific, I might be able to help you. In general you can look at methods or properties that have “valid” in their names.

1.I want to draw a line as shown in following screen-shot:

As you can see in Screen-shot , there is a half-solid and half-dotted line between two nodes. How can I achieve this using GoJs?

  1. Suppose I want to draw a shape or link, but before drawing, I want to check for some validations. For this I need some events which will fire before a shape or link is drawn. Is it possible to achieve this is GoJs?

  2. There are many events given in GoJs , For example, DiagramEvent or InputEvent , But is there any way in GoJs to create my own events which will manually fire and handled by me?

Thanks in Advance.

Kind Regards,

  1. We will need to explore the possibilities, so I cannot answer right now. Perhaps later today or tomorrow.

    2. For link validation, you can set myDiagram.toolManager.linkValidation to a predicate that you can define. But I recommend that you read first.

    For validation when creating a node, it depends on the circumstances and manner in which they are created.

    3. GoJS provides a lot of hooks for customization. There are simple properties that you can set, functional properties that you can set to event handlers, listeners that you can add, and methods that you can override. Of course you can implement your own event system in JavaScript for your app. But I do not understand what you are really asking for.

In experimenting with this issue I came up with this. It actually consists of three Links.

However I do not know if this kind of solution would be satisfactory for your app. For example, it requires straight, non-segmented link routes.

Can you please give me the source code for this.

Here you go: [EDIT: obsolete file].
This appears to work in version 1.2.4; I have not tried earlier versions.

Actually, straight segmented links work OK if there are end segments (due to fromSpot and/or toSpot spots). But Bezier curves and Orthogonal routing won’t work.

Also, one cannot data-bind in those two half-Links.

Can you please provide gojs code for “TwoStrokeLink.html”.
Is there any way to acheive the same thing using Orthogonal routing?

I did provide a link in my previous post. As with all of the samples at, you can always see the complete implementation in the page using the View Page Source command of your browser.

This example is now obsolete. Here is a MultiColoredLink class that implements support for a variable number of colors, new for v2.1.24:

The Link template in that sample will work with up to 5 colors, but you can change the template to have as many or as few colors as you need.