Transparent (Opacity) Property to Shapes

Is there any property to set Transparency level for shapes between range of 0 - 100 ?

Setting Fill = “transparent” makes the complete shape/node transparent.

As always, GoJS uses fractions, not percentages.

Can opacity set only to fill color ?

Setting opacity to 0 complete shape becomes invisible. I need border of the shapes to be visible when opacity is set to 0.

Use “rgba” syntax for CSS colors: <color> - CSS: Cascading Style Sheets | MDN

Is it possible to set opacity for TextBlock stroke. ?

I am trying to set the rgba color value but it doesn’t make any change on UI.

Applying rgba value for fill and stroke property gives effect of opacity/transpereny effect.

What did you try?

I have following template code -

     current.goObj(go.TextBlock,  // the center text
          alignment: go.Spot.Center, textAlign: "center", margin: 12, cursor: "move",
          editable: true,
      new go.Binding("text").makeTwoWay(),
      new go.Binding("font","font").makeTwoWay(),
      new go.Binding("stroke","textColor").makeTwoWay()

And textColor value is rgba color.

Trying to provide style component like the one in powerpoint.

And what is the value of data.textColor?

data.textColor is “rgba(255,0,0,0.52)”

This works when fill or stroke is binded to “fillColor” or “stroke” having same value.

I just tried setting TextBlock.stroke to your rgba color string:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" },
          new go.Binding("fill", "color")),
          { margin: 8, stroke: "rgba(255, 0, 0, 0.52)" },
          new go.Binding("text"))

and it produced:

as expected.

Sorry Walter,

Its working for me now. There was a typo mistake.

For changing colors and transparency level, initially i had 6 functions ( fill, border and text ).
One of function parameter passed was “textcolor” instead of “textColor”.

This gets fixed after refactoring the code to 2 functions with extra parameter. And then I noticed it.