anchors

An anchor of a link is a point in the reference element that this link wants to reach as its endpoint. Anchors are set via an anchor property provided within link end definitions. You can find more information in our learn section.

JointJS also contains mechanisms to define one's own custom anchor functions.

Built-in anchors

bottom()

The 'bottom' anchor function places the anchor of the link in the middle of the bottom side of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'bottom',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

bottomLeft()

The 'bottomLeft' anchor function places the anchor of the link at the bottom-left corner of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'bottomLeft',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

bottomRight()

The 'bottomRight' anchor function places the anchor of the link at the bottom-left corner of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'bottomRight',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

center()

The 'center' anchor function is the default anchor function. It places the anchor of the link at center of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'center',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

left()

The 'left' anchor function places the anchor of the link in the middle of the left side of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'left',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

midSide()

The 'midSide' anchor function places the anchor of the link in the middle of the side of view bbox closest to the other endpoint. It accepts two arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
padding	number	Offset the anchor by padding away from view bbox. Default is 0.

Example:

link.source(model, {
    anchor: {
        name: 'midSide',
        args: {
            rotate: true,
            padding: 20
        }
    }
});

modelCenter()

The 'modelCenter' anchor function places the anchor of the link at center of the model bbox.

Example:

link.source(model, {
    anchor: {
        name: 'modelCenter'
    }
});

perpendicular()

The 'perpendicular' anchor function tries to place the anchor of the link inside the view bbox so that the link is made orthogonal. The anchor is placed along two line segments inside the view bbox (between the centers of the top and bottom side and between the centers of the left and right sides). If it is not possible to place the anchor so that the link would be orthogonal, the anchor is placed at the center of the view bbox instead. The function accepts one argument, which can be passed within the anchor.args property:

padding	number	Limit the area inside the view bbox available for placing the anchor by padding. Default is 0.

Example:

link.source(model, {
    anchor: {
        name: 'perpendicular',
        args: {
            padding: 10
        }
    }
});

When the link has no vertices, the other end cell's center is used as a reference point. By default, this means that a link using the 'perpendicular' anchor slides alongside the source element's edge while pointing to target element's center. To invert this behavior, and have the anchor slide alongside the target element's edge while pointing to source element's center, pass a priority option to the target function:

link.target(model, {
    priority: true,
    anchor: {
        name: 'perpendicular',
        args: {
            padding: 10
        }
    }
});

right()

The 'right' anchor function places the anchor of the link in the middle of the right side of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'right',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

top()

The 'top' anchor function places the anchor of the link in the middle of the top side of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'top',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

topLeft()

The 'topLeft' anchor function places the anchor of the link at the top-left corner of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'topLeft',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});

topRight()

The 'topRight' anchor function places the anchor of the link at the top-right corner of the view bbox. It accepts three arguments, which can be passed within the anchor.args property:

rotate	boolean	Should the anchor bbox rotate with the end view? Default is false, meaning that the unrotated bbox is used.
dx	number	Offset the anchor by dx. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.
dy	number	Offset the anchor by dy. Default is 0.
	string	Percentage strings (e.g. '40%') are also accepted.

Example:

link.source(model, {
    anchor: {
        name: 'topRight',
        args: {
            rotate: true,
            dx: 10,
            dy: '40%'
        }
    }
});