Example of Zooming in ASP.NET Core Gantt Chart Control

Gantt Chart
Timeline
Zooming

This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product.

1
Product concept
4/2/20245 days18
2
Defining the product and its usage
4/2/20243 days30
3
Defining target audience
4/2/20243 days0
4
Prepare product sketch and notes
4/5/20242 days302FS
5
Concept approval
4/4/20240 days03FS
6
Market research
4/5/20249 days14
7
Demand analysis
4/5/20244 days15
8
Customer strength
4/5/20244 days305FS
9
Market opportunity analysis
4/5/20244 days05FS
10
Competitor analysis
4/11/20244 days307FS
11
Product strength analsysis
4/11/20244 days09FS
12
Research complete
4/17/20241 day010FS
Product concept
Defining the product and its usage
Defining target audience
Prepare product sketch and notes
Concept approval
Market research
Demand analysis
Customer strength
Market opportunity analysis
Competitor analysis
Product strength analsysis
Research complete

The sample demonstrates the zooming support in Gantt chart. You can zoom in or zoom out the project timeline dynamically with following toolbar buttons.

  • ZoomIn - To perform zoom in action on Gantt timeline.
  • ZoomOut - To perform zoom out action on Gantt timeline.
  • ZoomToFit - To show all tasks with timeline fit into available chart width.

The zooming feature enables you to view the tasks in the project clearly from minute to year timespan. You need to include ZoomIn, ZoomOut and ZoomToFit buttons in the toolbar for performing zooming actions in Gantt chart.
  • ZoomIn - If the user clicks on the ZoomIn icon, the timeline cell width will be increased. When the cell size exceeds the specified range, then it will be changed to the timeline view mode.
  • ZoomOut - If the user clicks on the ZoomOut icon, the timeline cell width will be decreased. When the cell size falls behind the specified range, then it will be changed to the timeline view mode based on the zooming levels.
  • ZoomToFit - In project, if the tasks are rendered in different time ranges, when the user clicks on the ZoomToFit icon, then all the tasks will be rendered within the current viewable chart container width.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab