[Tutorial] How to implement a Gantt diagram with ReactJs?
The Gantt diagram (chart) can be very impressive for people. It seems very hard to create a diagram on your website or your web app. It’s not easy but you have very good libraries to do it. The goal of this tutorial is to create this one :
Google chart is very useful to create the chart for just showing data. If you would like to update tasks, create links, any complex action, it’s not adapted. I advise you to use it if you want a very simple the diagram, it’s a good solution.
Dhtmlx is the best way to create a diagram in your app. We have a lot of options to custom your diagram. In this tutorial, we will create a very simple version of the Gantt diagram with Dhtmlx.
First of all, you have to install dependencies.
If you don’t have an environment in react js, you can create your project with Create React App
You have to use command npm or yarn to install dhtmlx-gantt :
npm install dhtmlx-gantt
yarn add dhtmlx-gantt
The structure of data
dhtmlx-gantt use specific structure of data, something like that :
First of all, you would like to config the format of your data with gantt.config.xml_date.
After that, you will init your chart with Gantt.init.
To parse your chart with your tasks, just use gantt.parse(tasks).
initGanttDataProcessor is the function to keep event from the Gantt. In the next tutorial, we will see how to connect firebase with our Gantt diagram by initGanttDataProcessor. (You could see the code for initGanttDataProcessor at the end of this article)
When your component will unmount, just destroy the data processor.
Render your chart
To render your chart, just call in div after defining ganttContainer.