Creating gantt chart with react diagram

I would like to create gantt chart example with react diagram(Gantt chart) I have created two diagrams but I didnt understand how can I pass mytask diagram reference to gantt layout subclass In your gantt chart you have created const myTasks but my scope is different when I created two different react diagram is there way to pass myTasks ref from $(GanttLayout,…)

Screen Shot 2022-05-24 at 14.09.00

Screen Shot 2022-05-24 at 14.10.30

We’re looking into the best way to accomplish this.

I think one way you could do this is to add a property to the GanttLayout which is a go.Diagram.

Then you would set that property in a componentDidMount/useEffect, after both refs are valid. You can get the Diagram from a ref by calling this.myTasksRef.current?.getDiagram();.

Sorry Where can i add that property?

instead of doing class I tried to move doLayout(coll) method to inside initDiagram() but doest really work Is there a way to do?

Add it to the GanttLayout class.

class GanttLayout extends go.Layout {  
  constructor() {
    this.cellHeight = GridCellHeight;
    this.myTasks = null;


// DiagramWrapper
public componentDidMount() {
    const myTasks = this.myTasksRef.current?.getDiagram();
    const myGantt = this.myGanttRef.current?.getDiagram();
    if (myTasks instanceof go.Diagram && myGantt instanceof go.Diagram) {
      myGantt.layout.myTasks = myTasks;

oh okey thank you so much Ill try this

Here’s a working sample: gojs-react-Gantt - CodeSandbox

Thank you so much Actually I have another problem I would like convert tree layout to table layout on the left side and hide links I convert table layout but links are visible what should i do hide links I want make table look like second picture

Screen Shot 2022-05-25 at 15.37.34
How can i hide the links and give table to full width

To hide the links you can change the link template to simply $(go.Link).

Is each of those rows coming from one node data object? If so, you may not want a TableLayout, but instead a GridLayout with wrappingColumn set to 1.

Yes It will come from nodedata but how would set header gridlayout (id cob index) each row has corresponding byte value this will be another challenge Do you have some sample i can make it work thank you

Here’s an example of a GridLayout that maintains the sizes of each node’s columns to be the same and fills the viewport.

Thank you so much Actually I do have another problem should

mygantt chart and table doest really align what can I do about that?

You’ll need to set it up like the Gantt sample I showed earlier. Set the Diagram.padding, Diagram.initialPosition, ViewportBoundsChanged listeners, etc.

Yes I have done that but still have alignment issue, other problem when I do $(go.Link). I do have
“GraphLinksModel.linkKeyProperty must not be an empty string for .mergeLinkDataArray() to succeed.”
should I pass empty array?

That means you have not set the linkKeyProperty in your GraphLinksModel definition. You’ll need to take a closer look at the example I sent earlier and see why yours is different.

A post was split to a new topic: How to know where a node was dropped?