Controlling the bezier curve


This is the structure of my links:

                routing: go.Link.AvoidsNodes,
                curve: go.Link.Bezier,
                adjusting: go.Link.Stretch,
                relinkableFrom: true,
                relinkableTo: true,
                reshapable: true,
                resegmentable: true,
                deletable: false,
                    { 'ButtonBorder.fill': 'white', '_buttonFillOver': 'lightgray' },
                        $(go.TextBlock, 'Delete',
                        { margin: 12 }
                            click: (e, obj) => {
                                e.diagram.commit(function(d) {
            $(go.Shape)  // the arrowhead

This generates links with a Bezier curve with the points- P1, P2, P3, P4 as shown in the picture below:

I want to change the curve to the scenario shown in dark blue in the image, i.e., a curve with 2 points - P1 and P2. And control points A1 and A2.

How can this be done?

Remove the setting of routing. You have now set it to be an Orthogonal routing, so the path is going through points that are on an orthogonal path, which is not what you want.

On removing the routing setting, im just getting an almost straight line. I need the Curve as seen in dark blue in the above image. That’s not working even if i set the curviness property to 200.

Increase the fromEndSegmentLength and toEndSegmentLength, which in this case controls the distance from the end point to the corresponding control point.

Either set it on the node’s port, if you want links to default to using certain end segment length values when connecting with that port, or set it on a link, if you want a particular link to use those lengths.