How to Build a Simple Gantt Chart With CSS and JavaScript

So far in our series of CSS chart tutorials, we’ve learned how to create different types of charts including bar charts, thermometer charts, and pie charts.

Today we’ll continue this journey by building and presenting data in a Gantt chart. Unlike the other chart tutorials, we’ll be making heavy use of JavaScript to implement various aspects of the chart. You’ll be able to use this basis as a Gantt chart template for future projects.

Note: keep in mind that it’s perfectly possible to build a pure CSS Gantt chart thanks to CSS Grid Layout. See how it’s done in this tutorial!

Solving Problems With CSS Grid: The Gantt Chart

Ian Yates

29 Aug 2019

The Gantt Chart We’re Building

Here’s the chart we’ll be creating (hit rerun to see it animate). It shows a series of tasks, making clear when those tasks are scheduled to begin along the course of a week–either at the start of a day, or halfway through–and when they’re due to be completed:

What is a Gantt Chart?

Developed by mechanical engineer Henry Gantt in the run up to WW1, Gantt charts were originally used to manage the logistics of mobilizing American soldiers and munitions. Nowadays Gantt’s techniques are used for way more than warfare; in fact you’ll find them present in most industries.They make it easy to visualize a list of tasks, the dependance of those tasks on one another, and their state of completion.

“A Gantt chart is a type of bar chart that illustrates a project schedule. This chart lists the tasks to be performed on the vertical axis, and time intervals on the horizontal axis. The width of the horizontal bars in the graph shows the duration of each activity.” – Wikipedia

Gantt charts give managers the ability to manage projects, schedule tasks, watch progress, delegate responsibilities, and allocate resources.

In actual fact, you don’t have to be a manager to use them. Anyone who wants to organize their tasks can benefit from this form of project visualization.

Regardless of using it as a management tool, Gantt’s layout can also have other uses. For example, you can use this approach within a corporate site as a timeline for visualizing the company’s history.

Gantt Solutions

Most project management platforms use Gantt charts as a core part of their offering. ClickUp, Zapier, and Monday.com are all names you’ll hear when project management apps are discussed (though the founders at Monday.com stress their timeline “focuses on people, not tasks or projects”).

Gantt Chart Templates on Envato Elements

Keynote, PowerPoint, and other presentation apps are more than capable of creating Gantt charts for demonstration purposes. Take a look at some of the Gantt chart templates available right now on Envato Elements.

There are also a number of free and proprietary solutions available out there for building your own Gantt charts. You can create one with Microsoft Excel, Google Sheets, a web app like TeamGantt, a JavaScript library like Highcharts, or even by writing your own code.

In this tutorial we’re going for the latter; let’s create our own simple Gantt chart using CSS and JavaScript!

1. Specify the Page Markup

We’ll begin by defining a wrapper element which contains two lists:

The first list defines the chart range (x-axis data). In our case, this will contain the days of the week. Each day will represent normal working hours.
The second list sets the chart data (y-axis data). In our case, the data will include the tasks that need to be performed within a week. Each list item, which describes a task, comes with two custom attributes: the data-duration attribute and the data-color attribute. The first attribute defines the task duration, while the second one its background color. The value of the data-duration attribute should be in the [startDay]-[endDay] format. That being said, we’ll use the data-duration="tue-wed" for a task that should start on Tuesday and finish on Wednesday. Furthermore, a task can also start and finish in the middle of a day. In such a case, the data-duration attribute value should be in the [startDay]½-[endDay]½ format. So for example, we’ll use the data-duration="tue-wed½" for a task that should start on Tuesday and finish in the middle of Wednesday. Similarly, the data-duration="tue½-tue" will describe a task that should start in the middle of Tuesday and finish on the same day.

Here’s the required markup:

<div class="chart-wrapper">
  <ul class="chart-values">
    <li>sun</li>
    <li>mon</li>
    <li>tue</li>
    <li>wed</li>
    <li>thu</li>
    <li>fri</li>
    <li>sat</li>
  </ul>
  <ul class="chart-bars">
    <li data-duration="tue-wed" data-color="#b03532">Task</li>
    <li data-duration="wed-sat" data-color="#33a8a5">Task</li>
    ...
  </ul>
</div>

2. Style the Chart

For the sake of simplicity, I won’t walk through the initial reset styles, but feel free to look at them by clicking at the CSS tab of the demo project.

The chart wrapper will have a maximum width with horizontally centered content:

.chart-wrapper {
  max-width: 1150px;
  padding: 0 10px;
  margin: 0 auto;
}

The x-axis

The .chart-values list will be a flex container. Its flex items (days) will be equally distributed across the main axis and have a minimum width of 80px. As a result of that minimum width, on small screens the chart won’t shrink beyond that, and a horizontal scrollbar will appear. Feel free to remove it, if you don’t like this behavior.

To better visualize the left and right boundaries of each item, we’ll use their ::before pseudo-element. We’ll give it a big hardcoded height (510px) which ensures that it will expand to all tasks. Instead of hardcoding that value, there’s always the option to dynamically calculate it through JavaScript. But let’s skip that solution for now, as it’s of secondary importance.

The corresponding styles:

:root {
  --divider: lightgrey;
}

.chart-wrapper .chart-values {
  position: relative;
  display: flex;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 1.2rem;
}

.chart-wrapper .chart-values li {
  flex: 1;
  min-width: 80px;
  text-align: center;
}

.chart-wrapper .chart-values li:not(:last-child) {
  position: relative;
}

.chart-wrapper .chart-values li:not(:last-child)::before {
  content: '';
  position: absolute;
  right: 0;
  height: 510px;
  border-right: 1px solid var(--divider);
}

The y-axis

The items (bars) of the second list will initially be hidden. Specifically, they will have width: 0 and opacity: 0. Plus, we’ll give them position: relative. Later we’ll dynamically set their left position according to the value of their data-duration attribute.

Here are the related styles:

:root {
  --white: #fff;
}

.chart-wrapper .chart-bars li {
  position: relative;
  color: var(--white);
  margin-bottom: 15px;
  font-size: 16px;
  border-radius: 20px;
  padding: 10px 20px;
  width: 0;
  opacity: 0;
  transition: all 0.65s linear 0.2s;
}

@media screen and (max-width: 600px) {
  .chart-wrapper .chart-bars li {
    padding: 10px;
  }
}

3. Add the JavaScript

When the page loads, or the browser window gets resized, the createChart function will be executed:

1	window.addEventListener("load", createChart);
2	window.addEventListener("resize", createChart);

Note: As I’ve mentioned in other tutorials, there are different ways for limiting the resize events that are emitted. For example, one effective solution is to use Lodash’s _.debounce function. That’s beyond the scope of this tutorial though.

Inside this function, we first do the following things:

Grab the items of the two lists.
Convert the days NodeList into a real array by using the spread operator. Alternatively, we could have used the Array.from() method. This conversion will allow us to take advantage of the filter() method, which is available in arrays, for filtering the days.
Loop through the tasks.

function createChart(e) {
  // 1
  const days = document.querySelectorAll(".chart-values li");
  const tasks = document.querySelectorAll(".chart-bars li");
  // 2
  const daysArray = [...days];
  // 3
  tasks.forEach(el => {
    ...
  });
}

Loop the Tasks

Next, for each task:

We grab the value of its data-duration attribute (e.g. tue-wed). In addition, we split this value by using the "-" as a separator.
The first string of the returned array represents the starting day of the task (e.g. tue), while the second one its ending day (e.g. wed).
Knowing its starting day, we filter the daysArray to retrieve the list item (day) that matches this day. During this test, we ignore possible presence of the "½" character. Then, we do a few calculations to calculate the required left property value of the related task.
Knowing its ending day, we filter the daysArray to retrieve the list item (day) that matches this day. During this test, we ignore possible presence of the "½" character. Then, we do a few calculations to calculate the required width property value of the related task.

tasks.forEach(el => {
    // 1
    const duration = el.dataset.duration.split("-");
    // 2
    const startDay = duration[0];
    const endDay = duration[1];
    let left = 0,
      width = 0;

    // 3
    if (startDay.endsWith("½")) {
      const filteredArray = daysArray.filter(day => day.textContent == startDay.slice(0, -1));
      left = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2;
    } else {
      const filteredArray = daysArray.filter(day => day.textContent == startDay);
      left = filteredArray[0].offsetLeft;
    }
    
    // 4
    if (endDay.endsWith("½")) {
      const filteredArray = daysArray.filter(day => day.textContent == endDay.slice(0, -1));
      width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2 - left;
    } else {
      const filteredArray = daysArray.filter(day => day.textContent == endDay);
      width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth - left;
    }
    ...
  });

Note: In the code above, we use the Element.offsetLeft property to retrieve the left position of an element relative to its parent. Plus, we take advantage of the Element.offsetWidth property to find the element’s width. As another option to grab its width, we could have equally used the more precise Element.getBoundingClientRect() method.

Set Styles

Having calculated the left and width values of each task, the last step is to perform the following actions:

Apply the corresponding styles.
Grab the value of the data-color attribute and set it as the background color of the task.
Show the task. Remember all tasks are initially hidden.
The actions 2 and 3 should run only on page load as their values won’t change each time we resize the browser window.

tasks.forEach(el => {
  ...  
  // 1
  el.style.left = `${left}px`;
  el.style.width = `${width}px`;
  // 4
  if (e.type == "load") {
    // 2
    el.style.backgroundColor = el.dataset.color;
    // 3
    el.style.opacity = 1;
  }
 });

Conclusion

That’s it! We managed to build a fully functional Gantt chart. Thanks for following along folks, I hope this provided a good exercise for refreshing your JavaScript skills. Here’s one more look at the final demo:

Play with it and if you find any way to enhance its functionality, be sure to share! Stay tuned for the equivalent CSS Gantt chart.

As always, thanks a lot for reading!

Next Steps

If you want to challenge yourselves, try to convert this vertical timeline into a Gantt chart.

Spreadsheets, data visualization, Gantt chart templates, graphs, animation–there’s plenty more to dig into!