How to Build a Project Timeline Chart with OrgChartJS

Visualizing the progress of your project in a structured and interactive way can make a huge difference in team coordination and planning. In this tutorial, we’ll show you how to build a Project Timeline Chart using OrgChartJS, a powerful JavaScript library for hierarchical diagrams.

Project Timeline Chart

🧱 What Are We Building?

We're creating a timeline-style breakdown of a project that includes:

• Phases (Design, Development, Testing, Launch)

• Subphases (e.g., UX/UI Design)

• Tasks with start/end dates and durations

• Milestones for major delivery points

🔧 Step-by-Step Breakdown

1. Include the OrgChart Library

<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>

2. Customize Templates

We define several custom node templates:

• start for the project start

• phase and subphase blocks

• task cards with colored headers and timeline info

• milestone for marking important completion points

Each template is styled uniquely using SVG elements and CSS.

3. Calculate Task Duration

We add a helper function to compute the number of days between two dates:

function getDays(d1, d2) {
  d2 = d2 || new Date();
  const diffInMs = d2 - d1;
  return diffInMs / (1000 * 60 * 60 * 24);
}

4. Format Data Dynamically

Using chart.on('field'), we reformat date fields (from YYYY-MM-DD to DD/MM/YYYY) and compute durations automatically:

chart.on('field', function (sender, args) {
  if (args.name === "start" || args.name === "end") {
    // Format date
  }
  if (args.name === "days") {
    // Calculate duration
  }
});

5. Enable Node Expand/Collapse

We bind custom buttons to minimize or maximize specific nodes:

chart.on('redraw', function () {
  document.querySelectorAll('*[data-btn-min]').forEach(btn => {
    btn.addEventListener('click', () => chart.minimize(btn.getAttribute('data-btn-min')));
  });
  document.querySelectorAll('*[data-btn-max]').forEach(btn => {
    btn.addEventListener('click', () => chart.maximize(btn.getAttribute('data-btn-max')));
  });
});

6. Load the Project Data

The full project structure is passed in an array with hierarchy defined by pid and stpid:

chart.load([
  { id: 1, phase: "Start project", tags: ["start"] },
  { id: 2, pid: 1, phase: "Design", tags: ["phase"] },
  // ...subphases, tasks, milestones
]);

✅ Result

You get a fully interactive timeline that allows you to:

• View project breakdown by phase

• See start/end dates and duration of each task

• Expand/collapse sub-sections

• Highlight key milestones visually

Full Code Example

🧠 Final Thoughts

Using OrgChartJS, you can go beyond simple org charts and turn it into a full-blown project visualization tool. With the ability to customize templates and add logic for date formatting and durations, this setup becomes a handy tool for project managers, design teams, and product leads.