Is it possible to show quarters in timeline?

[Niels Van Goethem]

When using the autozoom feature, it sometimes shows the data per quarter. 

Is it possible to set the timeline on this scale manually?

[Ajithkumar Gopalakrishnan]

Hi Niels,

Greetings from Syncfusion Support,

To achieve your requirement, we suggest using the formatter property in the timelineSettings of the Gantt chart. This property customizes the top and bottom tiers, such as setting them to quarters. We have attached a code snippet and sample for reference.

<ejs-gantt id="ganttDefault" height="430px"

        [timelineSettings]="timelineSettings"

        >

        ...

</ejs-gantt>

this.timelineSettings = {

        topTier: {

            unit: 'Month',

            count: 3,

            formatter: (date: Date) => {

                var month = date.getMonth();

                if (month >= 0 && month <= 2) {

                    return 'Q1';

                } else if (month >= 3 && month <= 5) {

                    return 'Q2';

                } else if (month >= 6 && month <= 8) {

                    return 'Q3';

                } else {

                    return 'Q4';

                }

   

            }

            },

            bottomTier: {

            unit: 'Month',

            format: 'MMM'

        }

};

You can find a working example on StackBlitz.

For more information, you may refer to the following link:

Top tier and bottom tier in Angular Gantt component | Syncfusion

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[Niels Van Goethem]

Hi, thank you for answering so quickly. 

I have tried this solution already, and it almost works but the months don't match with the correct quarter:

January is in Q4, and Q1 starts with 

[Ajithkumar Gopalakrishnan]

Hi Niels,

We need to clarify the behavior of the Gantt chart when using a formatter for the topTier to display quarter values. The quarter is rendered based on the date; for example, if the projectStartDate is in June, it is calculated as part of Q2. However, the timeline width is allocated based on the specified count, meaning we cannot allocate the entire width solely for June as Q2. Instead, the timeline divides the width according to the count, so a single width cannot be designated exclusively for June. Given this limitation, we cannot meet your specific requirement.

This behavior is working as expected. To ensure the correct quarter values display, set the projectStartDate to begin in January, which aligns with the proper quarter sequence.

this.projectStartDate= new Date('01/01/2024');

<ejs-gantt id="ganttDefault" height="430px"  [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" >

    ...

</ejs-gantt>

You can find a working example on StackBlitz.

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G