Question about fishbone in GoJS

hello I have a question about fishbone diagram in GoJS

I just take some time to understand code in GoJS Sample
and I figure this out that we can change text size or wording in a text in JSON
so this is my question

  1. How can I change the color of the text ? I’m already try add parameter color is dosen’t work at all
  2. How can I add the text and some picture in the same line for “check mark” or "x mark " like the picture that I attach
    3.How can I interact the diagram my click on it . for example I would like to right click on it and select delete

If you add properties to the data objects in the model, you need to add Bindings in the template(s) to automatically associate those properties with properties of GraphObjects in the template.

If you want to change the color of the text, you’ll either want to add a Binding to the TextBlock to bind “stroke” to “color” or to bind “background” to “color”, depending on which aspect of the text’s coloring you want to control. Please read through Get Started with GoJS and GraphObject Manipulation and then the first several pages of GoJS Introduction -- Northwoods Software, up through page GoJS Data Binding -- Northwoods Software.

So you’ll want to extend the node template in the Fishbone sample to be something like:

  $(go.Node, "Horizontal",
      $("Button",
          $(go.Picture, new go.Binding("source", ...)),
          { click: function(e, obj) { ... } }
      ),
      $(go.TextBlock,
          new go.Binding("text", ...),
          new go.Binding("stroke", "color"))
  )

For more information about buttons, read GoJS Buttons -- Northwoods Software.

For more information about context menus, read GoJS Context Menus -- Northwoods Software.

There are probably other aspects of your app that you want to learn more about – the topics are likely covered by the Introduction pages.