Gantt chart component

[ricmars]

The goal is to represent a list of data objects in a Gantt chart along with there dependencies. The objects could be cases or data objects.

[vijayjangid]

I am looking into this, exploring open source libraries.

[vijayjangid]

These some of the open source libraries I found in a quick scan. Will do a comparative study and share Pros/cons.
At first glance, none of these is keyboard accessible. Only a few supports dependencies in Gantt chart.

1. https://www.npmjs.com/package/vis-react
2. https://github.com/neuronetio/gantt-schedule-timeline-calendar
3. https://github.com/ANovokmet/svelte-gantt
4. https://github.com/TheTechCompany/react-timeline-gantt
5. https://github.com/medesd/react-gantt
6. https://github.com/MaTeMaTuK/gantt-task-react

[vijayjangid]

Here is the comparision of different libraries shared above. These are sorted in the order of best to worst fit for our requirement.

Rank	Library	Demo	Framework	Typescript	Keyboard navigation	Comment
🥇	gantt-task-react	Gantt schedule	React	✅	🔲 (partial support)	Tasks are keyboard focusable but connectors are not. UX is good. The demo doesn't show example with multiple tasks with each row with dependency. Not sure if that's a usecase.
🥈	svelte-gantt	Gantt	svelte (can be used in React code)	✅	❌	Supports Gantt with dependencies. Also supports multiple tasks within each row and drag/drop in both direction
🥉	react-timeline-gantt	Timeline Gantt	React	✅	❌	UX is not very intuitive. Depencies feature is not consistantly working
-	react-gantt	Gantt	React	✅	❌	Very basic, doesn't have dependencies feature support
-	vis-react	Timeline	JS	❌	❌	This doesn't have a Gantt chart componenet directly. Timeline component could be used with some tweaks but UX will be a challenge. Not updated since last 4 years
-	neuronetio-gantt	Gantt schedule	React	✅	❌	PAID library - cannot use
-	Bryntum	Bryntum gantt	React	✅	✅	PAID library - cannot use

In conclusion, the top 2 choices are good options. Based on our usecase we can choose which one to go for. I have kept the first one on top due to it's partial accessibility support.
CC @ricmars

[ricmars]

great analysis and details - gantt-task-react looks a great choice