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
close icon

How to display multiple years on the Gantt chart timeline

Dear friends,

We are using syncfusion javascript Gantt on our web page. We use the Gantt chart to visualize projects that can take multiple years to complete. We have only limited space for the Gantt container on our page and we would want to scale the timeline to fit more years in the Gantt control. At the moment we can only see one year at a time (like 2016) in the control and need to scroll the Gantt chart to the right to see next years.

What do we need to do to scale the time axis so that we can see many years (like 2016 - 2022)?

3 Replies

JD Jayakumar Duraisamy Syncfusion Team July 4, 2017 01:00 PM UTC

Hi Jaakko, 
Thanks for contacting Syncfusion support. 
From the given requirement, we have some clarification as mentioned below, 
- Can you please confirm that whether you are expecting to show all the timescale years within the available chart width without horizontal scroll bar?  
- Are you rendering the Gantt control in Year timescale schedule mode? or please share the schedule mode used in your project.  
We have also prepared a Gantt sample and rendered timescale units with minimum size. It can be achieved by using an API “timeScaleUnitSize” of scheduleHeaderSettings property. 
We can change the timescale unit size between 50% and 500%. 
Please share your requirement in detail. It will be helpful for us to server you better. 
Jayakumar D 

JR Jaakko Riihinen July 4, 2017 02:48 PM UTC

We are expecting to show multiple timescale years within the available width, sometimes with a horizontal scrollbar, sometimes without. For example, if we want to show 4 years out of 10, it requires the use of horizontal scrollbar. However, if we want to show 3 years out of 3, a scrollbar is not needed.

We are rendering the Gantt control in Year timescale schedule mode.

We have also tried to adjust timeScaleUnitSize between 50% and 500%. Using the minimum available value of 50% shows only 1 year in the Gantt control, as in the sample you provided. Bigger values than 50% only make the result worse. It feels like timeScaleUnitSize of 10% would get close to what we need, but it is not allowed.

If we could set the timescale according to our needs, we would need to drop the months scale from the control and only display the years. Otherwise the scale would become congested. Maybe something like small ticks every 3 or 6 months could then be used to provide more granularity to the scale.

JD Jayakumar Duraisamy Syncfusion Team July 5, 2017 12:30 PM UTC

Hi Jaakko, 
Thanks for detail information. 
At present, we don’t have support to achieve your given requirement. Hence, we have logged a feature report as “Support for quaterly, half-yearly view in year timescale”.  
By using this support, we can view the number of years in the header timescale without scroll. It will also resolve minimum timeScaleUnitSize problem. This feature will be implemented and included in our upcoming volume 4 main release. 
Please let us know, if you have any concern on this. 
Jayakumar D 

Live Chat Icon For mobile
Up arrow icon