Regarding the issue where the TreeExpanderButton does not display all the digits when the number of child nodes exceeds three digits,

We are displaying the number of child nodes on the TreeExpanderButton, but when the number exceeds three digits, not all the digits are displayed. Is it possible to dynamically increase the width of the TreeExpanderButton in that case?

b4ad0009490894859a9936c8940ebbe8
The number of children for Node C is 100.

Thanks

How have you defined that “TreeExpanderButton”?

My guess is that the button has a fixed width and height. Remove the declared width (and maybe the declared height, if you want), and that constraint should go away.

This:

is produced by:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(go.TreeLayout, { angle: 0, layerSpacing: 20 }),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    { selectionObjectName: "BODY", locationObjectName: "BODY", locationSpot: go.Spot.Center },
    $(go.Panel, "Auto",
      { name: "BODY", width: 120, height: 60 },
      $(go.Shape,
        { fill: "white", strokeWidth: 3 },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text")),
    ),
    $("TreeExpanderButton",
      {
        alignment: go.Spot.Right,
        "ButtonBorder.figure": "Circle",
        "ButtonIcon.visible": false
      },
      $(go.TextBlock, "XYZ",
        new go.Binding("text", "value")))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "ABC", color: "purple", value: 1 },
  { key: 2, text: "CAN", color: "darkred", value: 10 },
  { key: 3, text: "DRE2", color: "darkred", value: 1000 },
  { key: 4, text: "DEF", color: "slateblue" },
],
[
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 3, to: 4 },
]);
  </script>
</body>
</html>

The issue has been resolved by removing width and height.
Thank you.
b8bc444e8e9d52141d77ffd266b32283