Show Labels to Side (For Shorter Width Tasks)

On the homepage demo, tasks that have long names shows to the right of the task bar instead of within it. How do I do the same?

We are an Enterprise customer, v6 or 6.1 I think.

Thank you.

Hi @Osensnolf,
In order to do this you can use a few tools:

  1. Templates for rightside_text/leftside_text/task_text to show text in the right place. The code of templates may look like this fragment:
gantt.templates.task_text = function taskTextTemplate(start, end, task) {
  if (getTaskFitValue(task) === "center") {
    return task.text;
  return "";
  1. Custom function to compare the task and text sizes.

After that, you will be able to show the text on the rightside/leftside/inside of the task.

Here is a demo:

API list:

Best regards.

Awesome! I’ll ask my developer to give this a try and make sure it works. Much appreciation.

1 Like

In this snippet, we can achieve our goal only if we update task gantt.updateTask(;

I am loading data from database and I’ve separate call for each task update that really slow down loading for me.

Is there any other way to achieve this without this line?

Hello Osensnolf,
I don’t see the updateTask method in the snippet, and it works correctly without that.
If you want to repaint a task but don’t send a database request, you can use the gantt.refreshTask method:
And I have a different implementation to move the text to the right side when it doesn’t fit the task bar:

If you want to update several tasks at the same time and repaint only one time, you can use the batchUpdate method:

If that doesn’t help you, please describe your use case with more details, and send me a snippet where I can reproduce the issue.