Bar positioning

[uglovec]

Hi, I need to make functionality, there are lines, they can be of different heights. In these lines there are nested tasks, they are rendered as splited, in each such task there is a level property from 1…n, I somehow need to position the bars vertically as in the screenshot, how can this be done?

[Maksim_Lakatkou]

Hello,
Unfortunately, there’s no built-in solution for that, but you can try to achieve this by changing the vertical position of the task bars using the task_class template:

const step = 24;
const baseTop = 5;

function applyLevelStyles(tasks) {
	const styleEl = document.createElement('style');
	let css = '';

	const levels = tasks
		.filter(t => t.level)
		.map(t => t.level);
	const maxLevel = Math.max(...levels, 1);

	for (let i = 1; i <= maxLevel; i++) {
		const offset = baseTop + (i - 1) * step;
		css += `
		.gantt_split_child.bar-shift-level-${i} {
			top: ${offset}px !important;
			position: absolute !important;
		}
		`;
	}

	styleEl.innerHTML = css;
	document.head.appendChild(styleEl);
}

gantt.templates.task_class = (start, end, task) => {
	if (!task.parent) return '';
	const level = task.level;

	return `bar-shift-level-${level}`;
};

gantt.init('gantt_here');

const data = {
	tasks: [
		{ id: 1, text: 'Task #1', start_date: '02-05-2025 00:00', duration: 5, parent: '0', level: 1, render: 'split', type: 'project' },
		...
	],
	links: []
};

applyLevelStyles(data.tasks);

Here is an example: DHTMLX Snippet Tool

[uglovec]

and if there are many lines, how then to ensure that the tasks are positioned relative to their main task?

[Maksim_Lakatkou]

Hello,
It needs to adjust the logic slightly. Here’s how it can look:

const step = 24;
const baseTop = 5;

function applyLevelStyles(tasks) {
	const styleEl = document.createElement('style');
	let css = '';

	const levels = tasks
		.filter(t => t.level)
		.map(t => t.level);
	const maxLevel = Math.max(...levels, 1);

	for (let i = 1; i <= maxLevel; i++) {
		const margin = baseTop + (i - 1) * step - 40;
		css += `
			.gantt_split_child.bar-shift-level-${i} {
				margin-top: ${margin}px;
			}
		`;
	}

	styleEl.innerHTML = css;
	document.head.appendChild(styleEl);
}

gantt.templates.task_class = (start, end, task) => {
	if (!task.parent) return '';
	const level = task.level || 1;
	return `bar-shift-level-${level}`;
};

Please see an example: DHTMLX Snippet Tool