How to make a graduated panel stretch to full width of the diagram?


I am trying to make a graduated panel extend to the full width of the diagram, which is resized together with the window. I used the thermometer and the rulers examples and I am binding the width of the line to the width of the node and I am updating the width of the node at ViewportBoundsChanged with setDataProperty(node, ‘width’, vb.width).

My node template is this:

$(go.Node, 'Graduated', {
        graduatedTickUnit: 10,
        pickable: false,
        layerName: 'Foreground',
        isInDocumentBounds: false,
        isAnimated: false
    $(go.Shape, { geometryString: 'M0 0 H1000' }, new go.Binding('width')),
    $(go.Shape, { geometryString: 'M0 0 V20', interval: 1 }),
    $(go.TextBlock, {
        font: '10px sans-serif',
        interval: 1,
        alignmentFocus: go.Spot.TopLeft,
        segmentOffset: new go.Point(1, 1),
        graduatedFunction: function(n) {
            const value = new Date(n * 100);

            return new Intl.DateTimeFormat(navigator.language, {
                    year: 'numeric',
                    month: 'numeric',
                    day: 'numeric'}).format(value)
                + '\n'
                + new Intl.DateTimeFormat(navigator.language, {
                    hour: 'numeric',
                    minute: 'numeric',
                    second: 'numeric'

Why does my node stay 1000px wide and doesn’t expand further than that?


My guess is that it’s because you specified the Shape.geometry to be a Geometry that is 1000 wide.

Instead, I suggest that you use the “LineH” figure.

$(go.Shape, "LineH", { width: 1000, height: 0 }, new go.Binding("width"))

Hi Walter,

Thanks for the quick reply.

The result is still the same with the following changes:

        $(go.Shape, 'LineH', { height: 0, width: 1000 }, new go.Binding('width')),
        $(go.Shape, 'LineV', { height: 20, width: 0, interval: 1 }),


I just tried your code, both the unmodified original and with the change I suggested, and they both worked the way I would have expected. When I called:

myDiagram.model.set(theNode, "width", 1800)

the node became about 1800 wide – with a lot more space between the tick marks.

There are 2 solutions:

  1. either set the property of instead of node
diagram.model.set(, 'width', vb.width);
  1. or bind to the GraphObject:
$(go.Shape, 'LineH',
    { height: 0, width: 100 },
    new go.Binding('width', '', part => part.width).ofObject()

I chose option 2 since I don’t need to keep this information for other purposes.

Normally when one has the size of a shape dependent on the size of its part, that could cause problems because the size of a panel is usually dependent on the size of its elements. But it could work in this case. So is everything OK now?

You’re right, it’s better to use, in case the viewport becomes smaller.

Everything is fine now, thanks!