{"id":11883,"date":"2023-11-21T14:00:00","date_gmt":"2023-11-21T11:00:00","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11883"},"modified":"2026-09-15T14:19:01","modified_gmt":"2026-09-15T11:19:01","slug":"building-jira-like-project-roadmap-dhtmlx-gantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/building-jira-like-project-roadmap-dhtmlx-gantt\/","title":{"rendered":"Building a Jira-Like Project Roadmap with DHTMLX Gantt"},"content":{"rendered":"

When using DHTMLX Gantt in web projects, developers frequently have to meet various requirements related to the UI appearance. So they must be sure of the customization capabilities of our JavaScript Gantt chart library<\/a>. Therefore, it is time to continue our series of Gantt customization use cases. <\/p>\n

In the new episode, you will learn how to build a Jira-like project roadmap using our Gantt component.<\/p>\n

Use Case: Project Roadmap with Custom Timeline Icons, Status Bar, Timeline Resizer, and More<\/h5>\n

A project roadmap offers an easy-to-follow way to keep everyone interested in key project insights up to date. No wonder this functionality is often requested in project management apps and becomes a nice addition to other popular tools such as Gantt charts. In the previous blog post<\/a> of the series, we demonstrated that it is not a problem to create a project roadmap using DHTMLX Gantt, but we would like to back up this claim with a new challenging scenario.<\/p>\n

This time you will learn how our Gantt library helps create a project roadmap similar to the one made with Jira Align<\/a>. That\u2019s what it looks like:
\n\"projectCheck the code snippet ><\/a><\/p>\n

This roadmap sample visualizes the project workflow, where end-users can clearly understand how their work lines up against other tasks in planning intervals. In practice, such roadmaps can be useful in achieving the following goals:<\/p>\n