Non Pro version 9.0 Baseline is not working

Gantt
#1

I’m looking for basic feature of baseline in Gantt 9.0 version, any suggestions would be great help

#2

Hello,

You can implement a custom solution that visually mimics baselines using the timeline_cell_content template. This template lets you insert custom HTML inside the timeline cells, which means you can render your own “baseline bar”.

Here’s how it might be implemented:

  1. You can store planned dates in the task object:
{
  id: 1,
  text: 'Task with baseline',
  start_date: '2025-10-01',
  duration: 3,
  planned_start: '2025-10-02',
  planned_end: '2025-10-04'
}
  1. Then, inside timeline_cell_content, you can check whether a task has planned_start / planned_end, calculate its position using gantt.posFromDate, and return a custom HTML.
    Note that we render the baseline only once (on the planned start cell); otherwise, we would insert duplicate HTML in every cell between planned_start and planned_end.
    For the right position, we add one extra day to plannedEnd because posFromDate(plannedEnd) would give us the pixel position of the start of the end date, not the end of the day. By adding 1 day, we cover the full duration, including the last day:
gantt.config.date_format = '%Y-%m-%d';
const strToDate = gantt.date.str_to_date(gantt.config.date_format);

gantt.templates.timeline_cell_content = function (task, date) {
  if (!task.planned_start || !task.planned_end) {
    return '';
  }

  const plannedStart = strToDate(task.planned_start);
  const plannedEnd = strToDate(task.planned_end);

  if (date < plannedStart || date > plannedEnd) {
    return '';
  }

  if (date.valueOf() === plannedStart.valueOf()) {
    const left = gantt.posFromDate(plannedStart);
    const right = gantt.posFromDate(gantt.date.add(plannedEnd, 1, 'day'));
    const width = right - left;

    return `<div class="baseline-bar" style="left:0px; width:${width}px;"></div>`;
  }
  return '';
};

And with a bit of CSS, you can style it as a lighter or thinner bar:

.gantt_task_cell .baseline-bar {
  position: absolute;
  height: 6px;
  background: rgba(0, 120, 200, 0.4);
  border-radius: 3px;
  top: 2px; 
  z-index: 1;
}

Please check a full example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer