Custom EventMarkers and full height when few tasks

Question

Hi! I have two questions

Is it possible to customize the event markets, for example, I would like to have two designs, one for the "today" indicator and another one for the milestone tasks. In today market I would like to have a dot indicator and in the milestone market I would like to have another icon indicator
The other question is if I have a few tasks, is it possible to set the height of the Gantt container to 100vh of my container? To avoid the white space bellow

Monisha Sivanthilingam · Answer

Hi Brandon, 
  
Greetings from Syncfusion support. 
  
Please find the response for your queries below. 
  




Sl.No. 

Query 

Syncfusion Comments 
  


1 

Is it possible to customize the event markets, for example, I would like to have two designs, one for the "today" indicator and another one for the milestone tasks. 

Yes, we can customize the look of the event markers. We can do this by making use of the CSS classes of the event markers to customize them. The below code snippets demonstrate the solution. 
  
Index.css 




  
.e-gantt .e-gantt-chart .e-event-markers .e-span-label { 
   background: lightblue; 
   border-radius: 50%; 
   width: 40px; 
   height: 30px; 
   top: 110px; 
} 
  
.e-gantt .e-gantt-chart .e-event-markers .e-gantt-right-arrow { 
   background: lightblue; 
   border-radius: 50%; 
   width: 40px; 
   height: 30px; 
   top: 110px; 
} 
  
  
  


2 

The other question is if I have a few tasks, is it possible to set the height of the Gantt container to 100vh of my container? To avoid the white space bellow 

Currently, we do not have support to set the height of the Gantt Chart in vh. However, we can set the height of the Gantt Chart to auto if you wish to get rid of the blank space after the records are rendered. If not, please share more details about your requirement, so that we may provide a solution to you. 
  
Sample: https://stackblitz.com/edit/react-9pme2q?file=index.css 
  
Regards, 
Monisha.

Brandon · Answer

Hi! In issue #2 what I meant was that I want to fill the white spaces with the vertical lines of the gantt Is this pos

Premkumar Sudalaimuthu · Answer

Hi Brandon,

Yes, we can fill the whitespaces with the vertical grid line by applying the height of the chart row container to the element of vertical lines. We have shared sample and code snippets for how to set height for vertical lines by using their elements. Please contact us for further assistance.

Code snippets:

Index.html

<style>

.e-gantt .e-gantt-chart .e-line-container-cell {

height: 430px;

}

.e-chart-rows-container {

height: 430px !important;

}

</style>

Sample: https://stackblitz.com/edit/react-gcijfw?file=index.html

Regards,

Premkumar S