Blazor Gantt Chart Example - Timeline Zooming
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 |
This sample demonstrates the built-in zooming functionality of the Blazor Gantt Chart.
The project timeline can be dynamically adjusted using the following toolbar options:
ZoomIn- Increases the timeline cell width to provide a more detailed view. When the cell size exceeds a defined threshold, the timeline view mode automatically switches to a finer scale.ZoomOut- Decreases the timeline cell width to offer a broader overview. If the cell size drops below a certain range, the view mode changes to a coarser scale based on the zoom level.ZoomToFit- Adjusts the timeline to fit all tasks within the available chart width, ensuring a complete view of the project schedule regardless of task distribution.
The zooming feature supports viewing tasks across various time spans, from minutes to years. To enable this functionality, include the
ZoomIn, ZoomOut, and ZoomToFit buttons in the toolbar.
For further details, refer to the documentation.