Add help text with absolute position in Gojs

GoJS
1

Is there any possible solution for help text below the node like the image example below?
image

I tried to use a textblock with margin, alignment with go.Spot but the text is disappear when I set Y or X outside the node.

Below is my node template, many thanks.

  myDiagram.nodeTemplateMap.add(
        'corp-part',
        $(
          go.Node,
          {
            click: nodeClicked,
            mouseEnter: nodeHover,
            mouseLeave: nodeLeave
          },
          'Table',
          nodeStyle(),
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'Rectangle',
              {
                stroke: '#000',
                strokeWidth: 3,
                width: 120,
                height: 60,
                cursor: 'pointer',
                minSize: new go.Size(118, 60)
              },
              new go.Binding('fill', 'fill'),
              new go.Binding('stroke', 'strokeColor'),
              new go.Binding('strokeWidth', 'strokeWidth')
            ),
            $(
              go.Shape,
              'TriangleUp',
              {
                stroke: '#000',
                strokeWidth: 3,
                width: 120,
                height: 60,
                cursor: 'pointer',
                minSize: new go.Size(120, 60)
              },
              new go.Binding('fill', 'insideColor'),
              new go.Binding('stroke', 'insideStrokeColor')
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                editable: false
              },
              new go.Binding('text', 'text'),
              new go.Binding('stroke', 'textColor')
            ),
            $(
              go.TextBlock,
              {
                font: 'bold 9pt Lato, Helvetica, Arial, sans-serif',
                stroke: '#F8F8F8'
              },
              {
                editable: false,
                margin: 5,
                alignment: go.Spot.BottomRight
              },
              new go.Binding('text', 'country'),
              new go.Binding('stroke', 'textColor')
            )
          )
        )
      )
2

Which text are you asking about?

Only a “Spot” Panel easily positions elements outside the main element.

3

The “common - 100%” text @walter

4

This:

image
image294×592 12.8 KB

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: 90, 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", portId: "", width: 120, height: 60 },
      $(go.Shape,
        { fill: "white", strokeWidth: 3 },
        new go.Binding("fill", "color")),
      $(go.Shape, "Ellipse",
        { visible: false, fill: null, strokeWidth: 3, stretch: go.GraphObject.Fill, margin: 3/2 },
        new go.Binding("figure"),
        new go.Binding("visible", "figure", f => !!f)),
      $(go.TextBlock,
        { stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text")),
      $(go.TextBlock,
        { stroke: "white", font: "9pt sans-serif", alignment: new go.Spot(1, 1, -3, -3) },
        new go.Binding("text", "country"))
    ),
    $(go.TextBlock,
      { alignment: go.Spot.BottomRight, alignmentFocus: new go.Spot(0.5, 0, 0, -5) },
      new go.Binding("text", "help"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "ABC", color: "purple", country: "US", help: "Common - 100%" },
  { key: 2, text: "CAN", color: "darkred", country: "CA", help: "Common - 100%", figure: "Ellipse" },
  { key: 3, text: "DRE2", color: "darkred", country: "CA", help: "Common - 100%", figure: "Ellipse" },
  { key: 4, text: "DEF", color: "slateblue", country: "AT" },
],
[
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 3, to: 4 },
]);
  </script>
</body>
</html>