timeline_cell_content

specifies custom HTML content in the timeline cells

task	Task	the task's object
date	Date	the date of a cell

Example

gantt.templates.timeline_cell_content = function (task, date) {
    if (gantt.getTaskType(task) === "task"){
        const cost = calculateSlotCost(task, date);
        return `<div class='cost'>${demoValue}</div>`;
    }
    return "";
};

Related samples

Custom content inside the timeline cells

Details

You should use this template instead of the addTaskLayer() method in cases when you need to show custom content in cells of the timeline. It will be easier to implement and faster in performance.

Note, that the custom content will be displayed below the task bars, meaning the task bars will have higher z-index and the content of cells won't be visible when the task bar is located on top of it. If you need the content to be visible over the bar, you can add 'z-index' to the custom element:

<style>    .cost{
        position:absolute;
        z-index: 5;
        pointer-events: none; 
    }
</style>