We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Right label of taskbar get cropped within timeline

Thread ID:





150753 Jan 18,2020 08:50 AM UTC Jan 24,2020 09:23 PM UTC Angular - EJ 2 3
Tags: Gantt Chart
Asked On January 18, 2020 08:50 AM UTC


I am facing issue with the right label which is cropped when the taskbar is close to end of the gantt timeline.

When the label is long I tried to wrap it, but it looks like this
If I set the text to left label, I get same issue on the left side of the gantt timeline.
Is there a way to detect the right label(or right lable's taskbar) when it comes close to the end of the timeline, so that when detected it should set it to left label?

Thank you,

Nikitha R

Karthikeyan Raja [Syncfusion]
Replied On January 20, 2020 05:49 PM UTC

Hi Nikitha, 
We have analyzed your query. In Gantt, left label or right label is cropped when it exceeds start and end of the timeline. This is default behavior of Gantt. By using tooltip we can render right or left label’s content. If you are satisfied with this requirement, we can provide you a work around solution. 
Please get back to us, if you need any further assistance on this. 
Karthikeyan Raja. 

Replied On January 24, 2020 07:21 AM UTC


Using tooltip I can only view the taskbar data when I hover which is not what I need.
Since there is only export feature for the left side of the gantt chart, I had to use another library to get a screenshot of the right side of gantt chart.
I had to expand the gantt chart to its maximum width and height and show the data for the taskbar on the right label so that when I take a screenshot I get that data along with chart.

Is there a workaround for this?

Thank you

Nikitha R

Karthikeyan Raja [Syncfusion]
Replied On January 24, 2020 09:23 PM UTC

Hi Nikitha, 
We have achieved your requirement by following work-around, 
  • Gantt have a method called updateProjectDates which is used to update the timeline dynamically by passing start date and end date of timeline.
  • If we extend the timeline to the maximum width then need to find the maximum end date and it is used to update the timeline.
  • By summation of taskbar left, taskbar width and label text container width. It will give the end Point of a row. Similarly, we need to sort out the maximum end point from the available tasks.
  • We have prepared a custom method called “getDateByLeft()” which is give the date by end Point.
We have prepared a sample to find the maximum end point of a task and get the date then update the timeline. Here, you need to iterate the all the rows to find the maximum end point to find the maximum end Date. 
Please find the code snippet below, 
<button ejs-button (click)="changeTimeline()"> Update Timeline </button> 
<ejs-gantt #gantt id="ganttDefault" 
export class AppComponent { 
  @ViewChild('gantt', {static: true}) 
public ganttObj: GanttComponent; 
public ngOnInit(): void { 
changeTimeline(): void { 
  var task = this.ganttObj.getRecordByID(12); 
  var taskbarLeft = task.ganttProperties.left; 
  var taskbarWidth = task.ganttProperties.width; 
  var rowElement = this.ganttObj.getRowByID(task.TaskID); 
  var labelElement = rowElement.querySelector('.e-right-label-container'); 
  var totalLeft = taskbarLeft + taskbarWidth + labelElement.offsetWidth + 25; // 25 is the margin value 
  var newDate: Date = this.getDateByLeft(totalLeft);                
  this.ganttObj.updateProjectDates(this.ganttObj.timelineModule.timelineStartDate, newDate); 
Please find the sample from below link, 
Please get back to us, if you need any further assistance on this. 
Karthikeyan Raja. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon