CODEWITHSUNDEEP
javascripthtmlgojs
Pandiyan Cool
Pandiyan Cool

Reputation: 6565

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"))
  )
);

Upvotes: 0

Views: 1567

Answers (2)

armin sadeghi
armin sadeghi

Reputation: 59

use this syntax for each corner:

$(go.TextBlock, "0,0",     { alignment: new go.Spot(0, 0) }),
$(go.TextBlock, "0.5,0",   { alignment: new go.Spot(0.5, 0) }),
$(go.TextBlock, "1,0",     { alignment: new go.Spot(1, 0) }),
$(go.TextBlock, "0,0.5",   { alignment: new go.Spot(0, 0.5) }),
$(go.TextBlock, "0.5,0.5", { alignment: new go.Spot(0.5, 0.5) }),
$(go.TextBlock, "1,0.5",   { alignment: new go.Spot(1, 0.5) }),
$(go.TextBlock, "0,1",     { alignment: new go.Spot(0, 1) }),
$(go.TextBlock, "0.5,1",   { alignment: new go.Spot(0.5, 1) }),
$(go.TextBlock, "1,1",     { alignment: new go.Spot(1, 1) }),

Upvotes: 0

Walter Northwoods
Walter Northwoods

Reputation: 4106

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

Upvotes: 1

Related Questions