How to set the initial zoom level

[Roberto Becchetti]

Goodmorning,

how can I set the initial zoomingLevel as level 2? I Configure this 3 zool levels.
private GanttZoomTimelineSettings[] zoomingLevel = new GanttZoomTimelineSettings[]

    {

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMM yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "dd MMM", Count = 1 }, TimelineUnitSize = 66, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 0 },

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMM yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "dd MMM", Count = 1}, TimelineUnitSize = 99, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 1 },

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Week, Format = "MMM dd, yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Day, Format = "dd", Count = 1 }, TimelineUnitSize = 33, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 2 },

    };

Thanks.

Roberto

[Ajithkumar Gopalakrishnan]

Hi Roberto,

Greetings from Syncfusion Support,

Based on your query, we understand that you are using the CustomZoomingLevels property to define customized zoom level settings in the Gantt Chart. However, your requirement is to render the Gantt Chart initially with your predefined Level 2 zoom settings.

We would like to clarify the default behavior of the Gantt Chart. In your configuration, the zooming levels are defined only for levels 0 to 2, whereas the Gantt Chart initially renders with its default timeline view (Week–Day mode).

Since your Level 2 zoom configuration is also based on the Week–Day timeline (with only format differences), we recommend applying the same zoom level configuration during the initial load by using the GanttTimelineSettings property. This ensures that the Gantt Chart renders with the desired zoom level when it is first loaded.

Based on the provided TopTier and BottomTier values, the initial timeline view will match your predefined Level 2 zoom configuration. Please refer to the following code snippet and attached sample for implementation details.

<SfGantt @ref="Gantt" DataSource="@TaskCollection"  CustomZoomingLevels=zoomingLevel Toolbar="@(new List<string>() { "ZoomIn", "ZoomOut", "ZoomToFit" })" Height="450px" Width="700px">

    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID" Dependency="Predecessor">

    </GanttTaskFields>

    <GanttTimelineSettings TimelineUnitSize=33 TimelineViewMode=TimelineViewMode.Month WeekStartDay=1>

        <GanttTopTierSettings Unit="TimelineViewMode.Week" Format="MMM dd, yyyy" Count="1"></GanttTopTierSettings>

        <GanttBottomTierSettings Unit="TimelineViewMode.Day" Format="dd" Count="1"></GanttBottomTierSettings>

    </GanttTimelineSettings>

</SfGantt>

private GanttZoomTimelineSettings[] zoomingLevel = new GanttZoomTimelineSettings[]

{

    new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMM yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "dd MMM", Count = 1 }, TimelineUnitSize = 66, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 0 },

    new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMM yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "dd MMM", Count = 1}, TimelineUnitSize = 99, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 1 },

    new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Week, Format = "MMM dd, yyyy", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Day, Format = "dd", Count = 1 }, TimelineUnitSize = 33, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 1, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 2 },

};

Sample link: https://blazorplayground.syncfusion.com/embed/hZBnNrZdqJQRaavL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

For more details, please refer to the documentation link below:

https://blazor.syncfusion.com/documentation/gantt-chart/zooming#customizing-zooming-levels
https://blazor.syncfusion.com/documentation/gantt-chart/top-tier-and-bottom-tier

However, in the above sample, we observed that when clicking the Zoom In button while using CustomZoomingLevels, the loading spinner continues indefinitely. This occurs because only three custom zooming levels are defined, and when the chart is already at the maximum zoom level, the Zoom In action is not handled properly. We have logged this reported issue, “Continuous loading spinner appears when clicking Zoom In with custom zooming levels” as a bug. Our team is working on a fix, which we plan to include in the February 17, 2026 weekly release.

You can track the progress of the resolution by visiting the feedback link provided below:

Feedback link: https://www.syncfusion.com/feedback/72604/continuous-loading-spinner-appears-when-clicking-zoom-in-with-custom-zooming

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Ajithkumar G

[Roberto Becchetti]

Thanks.

Roberto

[Ajithkumar Gopalakrishnan]

Hi Roberto,

We appreciate your patience.

We are glad to announce that we have included the fix for the issue “Continuous loading spinner appears when clicking Zoom In with custom zooming levels” in our 32.2.5 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

Root Cause: The spinner is not hidden while the invalid zooming levels. So, the spinner was in active state.

Solution: Modified the condition and updated the hide spinner now the spinner was in hidden state for the invalid zooming levels.

Sample: Attached as a zip file.

Feedback: https://www.syncfusion.com/feedback/72604/continuous-loading-spinner-appears-when-clicking-zoom-in-with-custom-zooming

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

Regards,
Ajithkumar G

Attachment: Home_a3d78bec.zip