[charts] Implement Gantt Chart

[joserodolfofreitas]

Summary 💡

Gantt Chart implementation

Benchmarks

Public, read only: https://mui-org.notion.site/Gantt-Chart-component-e0014e4a55ae44fe901d575b1886e78e Internal, write & read: https://www.notion.so/mui-org/Gantt-Chart-component-e0014e4a55ae44fe901d575b1886e78e

Requests

• https://mui.zendesk.com/agent/tickets/20549 - https://www.notion.so/mui-org/cfce9cf916cf49adb1be9109eb51d216

MUI X Gantt chart

https://mui.com/x/react-charts/gantt/

[flaviendelangle]

@joserodolfofreitas would you agree to link it in the charts doc ?

[joserodolfofreitas]

Sure thing, @flaviendelangle!

[flaviendelangle]

Done in #8739

[Onfire7]

I really need a Gantt chart that either has some table like features, or ideally, integrates into a table. It would be really cool if we could have a special table column that has sub columns for days and displays the as a Gantt chart. This way, we retain the ability to interact with the data in a table (Displaying important columns, editing, filtering, etc.)

[flaviendelangle]

Hi,

We don't have plan to create this component in the coming months. We are mainly focusing on the basic charts for now.

[BritishGit]

Appreciate the content being provided and look forward to when a Gannt chart becomes available.

[hdngr]

Looking forward to this!

[alexfauquette]

Thanks for your interest. Could you provide some information about what you are expecting from this component?

• What would be your use case
• Which feature do you hardly need?
• What issue you've seen on another library would be a deal break from using it?

[marcohaferkamp]

Really looking forward to it. Here are some ideas / use cases / current requirements in our project:

• Sticky first column & header
• Show different time resolutions in the header (e.g. month, calendar week and day), something like this:
• Allow different time resolutions (e.g. view on daily or weekly basis)
• Performance for a large time range (e.g. 5 years)
• Possibility to scroll to given date
• Custom rendering of items
• Tooltip on hover for items
• Tooltip on hover for header-cells (e.g. show all data of a day)
• Possibilty to store current scroll position

Our hardest need would not be the large interactivity (maybe tooltips would be nice), but rather the display part - basically just show data. One of the biggest problems we currently have is the performance .

[alexfauquette]

Thanks for all those insights @marcohaferkamp

One of the biggest problems we currently have is the performance

Does your current solution support virtualization?

[marcohaferkamp]

We have built a custom solution on our own, and no it's not implemented.

[salehsed]

+1

[itopaloglu83]

Resource timeline view would be great feature with the Gantt chart as well.

[alexfauquette]

@itopaloglu83 Would you have examples of nice resource timelines?

[itopaloglu83]

Of course. Here's a quick list from simplest to more featured. And my rumblings below that.

https://fullcalendar.io/docs/timeline-view

https://www.airtable.com/platform/views

https://demo.mobiscroll.com/javascript/timeline/month-view

Event connections and dependencies. https://bryntum.com/products/scheduler/

Next one is my favorite because it allows users to manage complex relationships between events. https://bryntum.com/products/schedulerpro/ (includes a scheduling engine)

Rumblings: Gantt charts are very useful but when there are many projects involved then the main issue becomes the resource availability. Especially considering the fact that each task may require numerous resources. There are many great resource management solutions out there like ERPs etc. but they are all lacking a good user interface.

[abdelrahmanes]

looking forward to this chart component and I hope it supports direction RTL and to be responsive

[alexfauquette]

I hope it supports direction RTL

Hi @abdelrahmanes do you have some specific RTL modification of a gantt in mind? I assume the past/future direction is inverted. But other than that are there some tricky aspect we should be aware of?

[abdelrahmanes]

@alexfauquette Great, that's what I meant, that the axis labels and data bars to be inverted

To be more clear, I was using apex timeline chart and I used the inverted boolean property for the date labels to be inverted but it wasn't working

(Jan, Feb, March) should be (يناير، فبراير، مارس) But it was ( مارس، فبراير،يناير)

I hope I was clear enough

[alexfauquette]

Yes, make totally sens :+1:

[MustBuildAdmin]

Hi looking forward for this Gantt

I have some use cases for this Gantt

1. calculating the critical path
2. calculating the free and total float values for a task or subtask

https://docs.dhtmlx.com/gantt/samples/08_api/17_show_task_slack.html https://docs.dhtmlx.com/gantt/desktop__critical_path.html#gettingfreeandtotalslack https://snippet.dhtmlx.com/5/eb05a1f90?_ga=2.196660396.1883656908.1707371675-595900954.1707225801&_gl=1zy3qdd_gaNTk1OTAwOTU0LjE3MDcyMjU4MDE._ga_N87XPB4GSG*MTcwNzM3MTY3NS4yLjEuMTcwNzM3MTczMi4zLjAuMA..

[sjacobi109]

Hi Guys, can't wait for this component! Drag and drop functionality for each task on the timeline, for both along the x and y axes, would be awesome. This would greatly improve user experience and flexibility within the chart.

[HimanshuBari21]

Yes, make totally sens 👍

[msavastio]

I'm looking forward to this one - I currently use the Bryntum Scheduler and I "dislike it strongly" is how I will put it. My use case is basically render the Outlook calendar week view for employee time sheets where the horizontal axis is days of the week and the vertical axis is hours. Bryntum does let me do this in a kind of hacky way, so I will give them that. I have a feeling this kind of use case would be achieved in a more intuitive way using a component from you guys!

[alexfauquette]

@msavastio That does not look like a Gantt chart usage. It's more a Scheduler edge case

[halsee]

Really looking forward to this feature! My company builds software for construction, and gantt charts are used heavily throughout the industry.

[goatrenterguy]

Looking forward to this component. We currently use DHTMLX gantt and we are constantly fighting it. The primary reason we went with DHTMLX Gantt was the performance and the second is it lists as supporting a ton of features. As we continue to use it we realized all of the implementations are half thought out. Designing this chart to handle just the UI and input from the user would allow for a lot more flexibility when implementing it into a project.

[JShawnLooney]

• GanttPro has a nice interface for reference as well. Worth taking a look.

• Traditional Gantt tasks have a start & end date, but imply continual work during that time period. It would also be nice to support a task type that is treated like a "window for completion" with "Earliest" & "Latest" dates in addition to a "Preferred" completion date. Or, have this feature for milestones and display it something like a tolerance measurement.

[gsbelarus]

+1

[benjaminfortunato]

+1

[ScottgArmstrong]

When is Gantt chart planned for release? Is there a Beta or alpha version currently available?