Project Timeline Chart

In this example, we show how to use OrgChart JS as a project timeline: we have a project start, phases, subphases, tasks with start/end dates, and milestone points.

Edit in BALKAN Code

1) Structure the Element Types

First, define separate templates for the different roles in the timeline:

• start for the starting node
• phase for main phases
• subphase for subphases
• task for dated tasks
• milestone for key events

This gives each type its own visual style and behavior, and keeps the chart readable even with larger datasets.

2) Calculate Task Duration

For tasks, use a helper function that calculates the difference between two dates in days:

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

Then, in the task template, render the duration (days + 1) together with start and end dates.

3) Configure the Chart

The core configuration includes:

• horizontal scrolling (mouseScroll: OrgChart.action.xScroll)
• left orientation (orientation: OrgChart.orientation.left)
• dynamic field definition for the dates
• field mapping via nodeBinding
• tags to map each data type to the correct template

This lets us feed unified data while controlling the entire visual layer through tags.

4) Add Collapse/Expand Interaction

With onRedraw, we attach click handlers to custom min/max buttons (data-btn-min and data-btn-max) and call:

• chart.minimize(id)
• chart.maximize(id)

This allows users to focus on the current phase without losing overall context.

5) Load the Timeline Data

With chart.load([...]), we pass a hierarchy of nodes with id, pid/stpid, dates, and tags. The combination of parent-child links and different templates turns the chart into a plan, a visual progress view, and a communication tool for the entire team.

This is the base model. From here, you can easily add statuses, assignees, priority colors, and automatic delay warnings.