We will use JavaScript modules to split the code into separate modules that can be imported and exported, so we’ll need a local HTTP server to run the code. The CSS will be defined in JavaScript files. We’ll create our Gantt chart using only HTML, CSS and JavaScript. Once you’re done, you’ll have a Gantt chart that looks like the one shown below. You can see a live example of the final Gantt chart here. Task durations can be added and deleted, and we’ll be able to edit them using drag and drop.We’ll be able to add, delete, and edit tasks.

The user can select the planning time period by selecting a start date and an end date.

The basic Gantt chart we will create will have the following features: You can find all the code used below in our GitHub repository. Let’s take a look at how you can make a basic drag-and-drop Gantt chart component using vanilla JavaScript. If you instead prefer to buy a battle-tested off-the-shelf version, take a look at our commercial Bryntum Gantt Chart. Gantt charts are surprisingly complex, so if you’re looking to build your own for production use, this guide will only show you the first steps.

Customize your chart to suit your needs.

Easily integrate your chart into existing project management dashboards.

While many companies use Excel to build Gantt charts, using a Gantt chart that is a JavaScript-based has a couple of advantages over spreadsheets, for example, you can: A Gantt chart is a really handy project management tool for coordinating complex schedules for large teams or multiple teams.

Gantt chart maker with months