this is my code
and the output is==>https://prnt.sc/26f5bo1
gantt.attachEvent(‘onGanttReady’, () => {
gantt.addTaskLayer({
renderer: {
render: (task) => {
const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);
const el = document.createElement(‘div’);
el.className = ‘deadline’;
el.style.left = sizes.left + ‘px’;
el.style.width = sizes.width + ‘px’;
el.style.top = sizes.top + ‘px’;
return el;
},
onrender: (task, node, view) => {
ReactDOM.render(
<GanttTaskText
iconClick={this.iconClick}
childIconClick={this.childIconClick}
task={task}
/>,
node,
);
},
},
});
//using React compo
gantt.addTaskLayer({
renderer: {
render: (task) => {
var mainDiv = document.createElement(‘div’);
mainDiv.className = ‘icons’;
for (var i = 0; i < task.array.length; i++) {
var elementDate =
task[‘custom_element_date_’ + [i]] ||
gantt.date.add(task.start_date, task.array[i].day, ‘day’);
var sizes = gantt.getTaskPosition(task, elementDate);
var el = document.createElement(‘div’);
el.setAttribute(‘data-task’, task.id);
el.setAttribute(‘data-icon’, [i + 1]);
if (task.array[i].color === ‘green’) {
el.className = s.indicator;
} else {
el.className = s.red_indicator;
}
el.style.left = sizes.left + ‘px’;
el.style.top = sizes.top + 6 + ‘px’;
el.style.color = ‘white’;
el.style.fontSize = ‘10px’;
mainDiv.appendChild(el);
}
return mainDiv;
},
onrender: (task, node, view) => {
for (var i = 0; i < task.array.length; i++) {
ReactDOM.render(<Tooltip value={task.array[i].num} />, node.childNodes[i]);
}
},
},
});
});