{"id":4066,"date":"2017-05-24T20:00:26","date_gmt":"2017-05-24T16:00:26","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4066"},"modified":"2026-01-30T11:50:43","modified_gmt":"2026-01-30T08:50:43","slug":"create-react-gantt-chart-component-dhtmlxgantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/create-react-gantt-chart-component-dhtmlxgantt\/","title":{"rendered":"Create React Gantt Chart Component with dhtmlxGantt"},"content":{"rendered":"

Updated on February 07, 2022<\/strong><\/p>\n

We won’t stop till show you that you can use our Gantt chart library<\/a> with any technology! And today is the turn of ReactJS, a popular JavaScript component-based library. Following the steps of this tutorial, you’ll know how to create React Gantt chart app with some basic features. So, let’s start.<\/p>\n

As always, you can find React gantt chart component demo on GitHub<\/a>.<\/strong><\/p>\n

Creating a Simple React App<\/h4>\n

The very first thing we need to do is to initialize the application structure. For this, we are going to use Create React app tool. It can be installed with the following command:<\/p>\n

yarn global add create-<\/span>react-<\/span>app<\/div><\/div>\n

You can find some additional information in this article<\/a>. <\/p>\n

Then we create an app:<\/p>\n

npx create-<\/span>react-<\/span>app gantt-<\/span>react<\/div><\/div>\n

When our app is created, we go to the folder and run it for the first time:<\/p>\n

cd gantt-<\/span>react
\nyarn start<\/div><\/div>\n

The first steps are completed, and as a result, our app should be started on http:\/\/localhost:3000\/<\/strong><\/p>\n

\"gantt<\/p>\n

Style agreement<\/h4>\n

In this tutorial, we’ll use the following folder structure:
\n – Each component will be placed inside a separate folder, named after the component.
\n – Each folder will contain an index.js file, which will explicitly specify which classes are exported by the component, and a file with the component implementation.
\nFor example, when we create our Gantt component, it will have the following structure:<\/p>\n

.\/<\/span>src\/<\/span>components\/<\/span>Gantt\/<\/span>
\n|-<\/span> Gantt.js<\/span>
\n|-<\/span> index.js<\/span>
\n|-<\/span> Gantt.css<\/span><\/div><\/div>\n

Gantt.js will contain the implementation of the component, and index.js will export it:<\/p>\n

import<\/span> Gantt from '.\/Gantt'<\/span>;<\/span>
\nimport<\/span> '.\/Gantt.css'<\/span>;<\/span>
\nexport<\/span> default<\/span> Gantt;<\/span><\/div><\/div>\n

And the outer code will import the folder<\/p>\n

import<\/span> {<\/span> Gantt }<\/span> from ".\/components\/Gantt"<\/span>;<\/span><\/div><\/div>\n

That way if we add extra components to our Gantt, they will be defined under the same folder and it won’t affect imports and won’t clutter our folder structure.
\nNow, when we’ve sorted it out, we can proceed.<\/p>\n

Let us start with our Gantt component.
\nThe first thing you need is to add dhtmlxGantt package to your project.
\nA free version of it can be added via npm or yarn:<\/p>\n

yarn add dhtmlx-<\/span>gantt<\/div><\/div>\n

Then, create the src\/components\/Gantt<\/em> folder.
\nHere we’ll add a React Component wrapper for dhtmlxGantt.
\nCreate Gantt.js file and open it:
\nsrc\/components\/Gantt\/Gantt.js:<\/em><\/p>\n

import<\/span> React,<\/span> {<\/span> Component }<\/span> from 'react'<\/span>;<\/span>
\nimport<\/span> {<\/span> gantt }<\/span> from 'dhtmlx-gantt'<\/span>;<\/span>
\nimport<\/span> 'dhtmlx-gantt\/codebase\/dhtmlxgantt.css'<\/span>;<\/span>
\nimport<\/span> '.\/Gantt.css'<\/span>;<\/span>
\n 
\nexport<\/span> default<\/span> class<\/span> Gantt extends<\/span> Component {<\/span>
\n    componentDidMount(<\/span>)<\/span> {<\/span>
\n        gantt.config<\/span>.date_format<\/span> =<\/span> "%Y-%m-%d %H:%i"<\/span>;<\/span>  
\n        const<\/span> {<\/span> tasks }<\/span> =<\/span> this<\/span>.props<\/span>;<\/span>
\n        gantt.init<\/span>(<\/span>this<\/span>.ganttContainer<\/span>)<\/span>;<\/span>
\n        gantt.parse<\/span>(<\/span>tasks)<\/span>;<\/span>
\n    }<\/span>
\n
\n    render(<\/span>)<\/span> {<\/span>
\n       return<\/span> (<\/span>
\n           <<\/span>div
\n                ref=<\/span>{<\/span> (<\/span>input)<\/span> =><\/span> {<\/span> this<\/span>.ganttContainer<\/span> =<\/span> input }<\/span> }<\/span>
\n                style=<\/span>{<\/span> {<\/span> width:<\/span> '100%'<\/span>,<\/span> height:<\/span> '100%'<\/span> }<\/span> }<\/span>
\n            ><\/<\/span>div><\/span>
\n       )<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

Then add this code to Gantt.css:<\/p>\n

html,<\/span> body,<\/span> #root,<\/span>#root div:<\/span>only-<\/span>child,<\/span> .gantt<\/span>-<\/span>container {<\/span>
\n  height:<\/span> 100<\/span>%;<\/span>
\n}<\/span><\/div><\/div>\n

And create an index.js file with the following content:<\/p>\n

import<\/span> Gantt from '.\/Gantt'<\/span>;<\/span>
\nexport<\/span> default<\/span> Gantt;<\/span><\/div><\/div>\n

What we have done here \u2013 we’ve created a react component that currently serves as a wrapper for dhtmlxGantt js library. dhtmlxGantt itself is a regular JS library that lives outside ReactJS world, thus we created a wrapper component.
\nOnce our component is mounted, we initialize dhtmlxGantt and attach it to DOM. We can also populate it with the data passed via props. <\/p>\n

Note, that since a free version of dhtmlxGantt has no destructor, we do not define the componentWillUnmount<\/a> method. It also means that if we remove a component from React at some point, the instance of dhtmlxGantt will stay in memory and will be reused next time when the component is mounted again.<\/p>\n

We have also specified the date_format<\/a> config, which sets the format of dates that will come from the data source so that Gantt could parse them correctly.<\/p>\n

The next step is to add Gantt to our App component. Note that we use hard-coded data for this sample:
\n.\/src\/App.js:<\/p>\n

import<\/span> React,<\/span> {<\/span> Component }<\/span> from 'react'<\/span>;<\/span>
\nimport<\/span> Gantt from '.\/components\/Gantt'<\/span>;<\/span>
\nimport<\/span> '.\/App.css'<\/span>;<\/span>
\n
\nconst<\/span> data =<\/span> {<\/span>
\n    data:<\/span> [<\/span>
\n        {<\/span> id:<\/span> 1<\/span>,<\/span> text:<\/span> 'Task #1'<\/span>,<\/span> start_date:<\/span> '2019-04-15'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.6<\/span> }<\/span>,<\/span>
\n        {<\/span> id:<\/span> 2<\/span>,<\/span> text:<\/span> 'Task #2'<\/span>,<\/span> start_date:<\/span> '2019-04-18'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.4<\/span> }<\/span>
\n    ]<\/span>,<\/span>
\n    links:<\/span> [<\/span>
\n        {<\/span> id:<\/span> 1<\/span>,<\/span> source:<\/span> 1<\/span>,<\/span> target:<\/span> 2<\/span>,<\/span> type:<\/span> '0'<\/span> }<\/span>
\n    ]<\/span>
\n}<\/span>;<\/span>
\nclass<\/span> App extends<\/span> Component {<\/span>
\n    render(<\/span>)<\/span> {<\/span>
\n        return<\/span> (<\/span>
\n            <<\/span>div><\/span>
\n                <<\/span>div className=<\/span>"gantt-container"<\/span>><\/span>
\n                    <<\/span>Gantt tasks=<\/span>{<\/span>data}<\/span>\/><\/span>
\n                <\/<\/span>div><\/span>
\n            <\/<\/span>div><\/span>
\n        )<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>
\nexport<\/span> default<\/span> App;<\/span><\/div><\/div>\n

If we run the app now, we should see a Gantt chart with initial tasks on a page:<\/p>\n

yarn start<\/div><\/div>\n

\"react<\/p>\n

Configuring Gantt chart <\/h4>\n

Let us explore the API of the component a bit more. If you complement an app with the Gantt chart, at some moment the client will ask you to add the ability to zoom the time scale of the Gantt chart. <\/p>\n

How it’s usually done: <\/p>\n