Blazor Gantt Chart Example - Timeline Zooming
This sample demonstrates the built-in zooming functionality of Gantt Chart. You can zoom in or zoom out the project timeline dynamically with the following toolbar buttons.
ZoomIn- To perform zoom-in action on Gantt Chart timeline.ZoomOut- To perform zoom-out action on Gantt Chart timeline.ZoomToFit- To show all tasks with timeline fit into available Chart width.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
|---|
| 1 | Product concept | 4/2/2021 | 4/8/2021 | 5 days | 33 | |
| 2 | Defining the product usage | 4/2/2021 | 4/6/2021 | 3 days | 30 | |
| 3 | Defining the target audience | 4/2/2021 | 4/6/2021 | 3 days | 40 | |
| 4 | Prepare product sketch and notes | 4/7/2021 | 4/8/2021 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/9/2021 | 4/20/2021 | 8 days | 25 | |
| 7 | Demand analysis | 4/9/2021 | 4/14/2021 | 4 days | 15 | |
| 8 | Customer strength | 4/9/2021 | 4/14/2021 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days | 30 | 7FS,8FS |
| 11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days | 40 | 9FS |
| 12 | Research completed | 4/20/2021 | 4/20/2021 | 0 days | 30 | 10FS |
Mar 24, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 |
W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T |
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 theZoomInicon, the timeline cell width is increased. When the cell size exceeds the specified range, the timeline view mode is changed.ZoomOut- If the user clicks on theZoomOuticon, the timeline cell width is decreased. When the cell size falls behind the specified range, the timeline view mode is changed based on the zooming levels.ZoomToFit- If tasks are rendered in different time ranges, clicking theZoomToFiticon renders all the tasks within the current viewable chart container width.
More information about Zooming in Gantt Chart can be found in this documentation section.