Search code examples
javascripthtmlgojs

Format and align text in gojs chart


How can we format the first textblock (word 'success') to the right side of the shape circle and also second textblock should present at the bottom of the circle shape?

Attached the fiddle link as well.

Helps much appreacited

gojs node template

myDiagram.nodeTemplate =
$(go.Node, "Auto", {
    movable: false
  },
  $(go.Panel, "Vertical",
    $(go.TextBlock, {
        margin: 5,
        font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "status")),

    $(go.Panel, "Auto", {
        background: "white"
      },
      $(go.Shape, "Circle", {
          strokeWidth: 4,
          margin: go.Margin.parse("10 5 10 5"),
          height: 75,
          width: 75,
          cursor: "pointer"
        },
        new go.Binding("fill", "color"), new go.Binding("stroke", "strokeColor")
      ),

      $(go.Panel, "Vertical",
        $(go.Picture, {
          source: "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
          background: "white",
          width: 25,
          height: 25
        })
      )
    ),
    $(go.TextBlock, {
        margin: 5,
        font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "name"))
  )
);

Solution

  • I've adapted your code a little bit:

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        {
          locationObjectName: "ICON", locationSpot: go.Spot.Center,
          movable: false
        },
        $(go.Panel, "Auto",
          {
            name: "ICON", background: "white",
            portId: "", cursor: "pointer",
            fromSpot: new go.Spot(0.5, 1, 0, 20)
          },
          $(go.Shape, "Circle",
            { strokeWidth: 4, width: 75, height: 75, margin: 5 },
            new go.Binding("fill", "color"),
            new go.Binding("stroke", "strokeColor")),
          $(go.Picture, "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
            { width: 25, height: 25, background: "white" })
        ),
        $(go.TextBlock,
          {
            alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top,
            margin: 5, font: '14px "Open Sans", sans-serif'
          },
          new go.Binding("text", "name")),
        $(go.TextBlock,
          {
            alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
            font: '14px "Open Sans", sans-serif'
          },
          new go.Binding("text", "status"))
      );
    

    enter image description here