Blazor Gantt Chart Example - Overview
Task TaskId Press Enter to sort. Press Alt Down to open filter Menu | Task Name Press Enter to sort. Press Alt Down to open filter Menu | Assigned Person Press Enter to sort. Press Alt Down to open filter Menu | Start Date Press Enter to sort. Press Alt Down to open filter Menu | End Date Press Enter to sort. Press Alt Down to open filter Menu | Task Priority Press Enter to sort. Press Alt Down to open filter Menu | Allocated Budget ($) Press Enter to sort. Press Alt Down to open filter Menu | Spent Budget ($) Press Enter to sort. Press Alt Down to open filter Menu | Completion (%) Press Enter to sort. Press Alt Down to open filter Menu | Status Press Enter to sort. Press Alt Down to open filter Menu | Related Tasks Press Enter to sort. Press Alt Down to open filter Menu | Risk Level Press Enter to sort. Press Alt Down to open filter Menu | Task Category/Work Location Press Enter to sort. Press Alt Down to open filter Menu | Technology Stack Press Enter to sort. Press Alt Down to open filter Menu | Initiative/Story Points Press Enter to sort. Press Alt Down to open filter Menu | Strategic Priority Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 1 | E-commerce platform redesign |  Sarah Lee
IT | 2/3/2025 | 10/21/2025 |
High | $1,200,000.00 | $420,000.00 | 36% |
On Track | - |
Medium | Web Development Remote | React Node.js MongoDB AWS | Strategic Initiative 800 | Q3-Q4 Priority |
| 2 | Project initiation |  John Smith
Project Management | 2/3/2025 | 3/11/2025 |
High | $30,000.00 | $28,500.00 | 100% |
Completed | - |
Low | Planning Remote | - | Foundational 13 | Executive Sponsored |
| 3 | Stakeholder identification |  John Smith
Project Management | 2/3/2025 | 2/7/2025 |
High | $8,000.00 | $7,800.00 | 100% |
Completed | - |
Low | Planning Remote | - | Internal 5 | Cross-functional |
| 4 | Project charter creation | Emily Chen
Project Management | 2/10/2025 | 2/14/2025 |
High | $15,000.00 | $14,700.00 | 100% |
Completed | 3FS |
Low | Documentation Remote | - | Governance 8 | Baseline Document |
| 5 | Initiation meeting | John Smith
Project Management | 2/18/2025 | 3/11/2025 |
High | $7,000.00 | $6,000.00 | 100% |
Completed | 4FS |
Low | Meeting Remote | - | Team Building 3 | Alignment |
| 6 | Requirements gathering | Emily Chen
Business Analysis | 2/18/2025 | 3/13/2025 |
High | $80,000.00 | $78,500.00 | 100% |
Completed | 2FS |
Low | Analysis Remote | Jira Confluence | Business Critical 55 | User-Centric |
| 7 | User interviews | Emily Chen
Business Analysis | 2/18/2025 | 2/27/2025 |
High | $30,000.00 | $29,200.00 | 100% |
Completed | - |
Low | Research Remote | Zoom Miro | User Insight 21 | Qualitative Data |
| 8 | Competitor analysis | Alex Johnson
Business Analysis | 2/18/2025 | 2/27/2025 |
Medium | $25,000.00 | $24,800.00 | 100% |
Completed | - |
Low | Research Remote | - | Market Intelligence 13 | Benchmarking |
| 9 | Requirements documentation | Emily Chen
Business Analysis | 2/28/2025 | 3/13/2025 |
High | $25,000.00 | $24,500.00 | 100% |
Completed | 7FS,8FS |
Low | Documentation Remote | Confluence Jira | Specification 21 | Traceability |
| 10 | Design phase | Michael Wong
UX/UI Design | 3/4/2025 | 4/17/2025 |
High | $150,000.00 | $135,000.00 | 93% |
In Progress | 6FS |
Medium | Design Remote | Figma Adobe XD | Creative 89 | User Experience |
| 11 | Information architecture | Lisa Park
UX/UI Design | 3/4/2025 | 4/2/2025 |
High | $35,000.00 | $34,000.00 | 100% |
Completed | - |
Low | UX Design Remote | Figma Miro | Structure 21 | Navigation |
| 12 | Wireframing | David Lee
UX/UI Design | 3/4/2025 | 3/24/2025 |
High | $45,000.00 | $44,000.00 | 100% |
Completed | - |
Low | UX Design Remote | Figma | Layout 34 | Functionality |
| 13 | Visual design | Michael Wong
UX/UI Design | 3/25/2025 | 4/17/2025 |
High | $70,000.00 | $57,000.00 | 80% |
In Progress | 12FS |
Medium | UI Design Remote | Figma Adobe XD | Branding 55 | Aesthetics |
| 14 | Development phase | Alex Johnson
Engineering | 4/3/2025 | 4/17/2025 |
High | $600,000.00 | $120,000.00 | 0% |
In Progress | 10FS |
Medium | Development Remote | React Node.js MongoDB AWS | Core Development 377 | Scalability |
| 15 | Sprint 1: User authentication | Rachel Green
Engineering | 4/3/2025 | 4/17/2025 |
High | $60,000.00 | $58,000.00 | 0% |
Completed | - |
Low | Backend Development Remote | Node.js MongoDB JWT | Security 34 | User Management |
| 35 | Test user authentication | Paul Harris
QA | 4/3/2025 | 4/10/2025 |
High | $8,000.00 | $0.00 | 0% |
Not Started | - |
Low | Testing Remote | Jest Cypress | Security Verification 10 | Critical Path |
| 36 | Enhance security measures | Linda Green
Engineering | 4/11/2025 | 4/17/2025 |
Medium | $9,000.00 | $0.00 | 0% |
Not Started | 35FS |
Medium | Security Remote | Node.js MongoDB | Strengthening Security 8 | Risk Mitigation |
| 16 | Sprint 2: Product catalog | Mike Ross
Engineering | 4/3/2025 | 4/11/2025 |
High | $65,000.00 | $62,000.00 | 0% |
Completed | - |
Low | Frontend Development Remote | React Redux | E-commerce 55 | Product Management |
| 37 | UI design review | Kevin White
UX/UI Design | 4/3/2025 | 4/11/2025 |
High | $7,000.00 | $0.00 | 0% |
Not Started | - |
Low | Design Remote | Figma | User Feedback Incorporation 7 | Improvement |
| 38 | Product page optimization | Alice Jones
Frontend Development | 4/3/2025 | 4/8/2025 |
Medium | $6,000.00 | $0.00 | 0% |
Not Started | - |
Medium | Frontend Development Remote | React Redux | Performance Enhancement 12 | Optimization |
| 17 | Sprint 3: Shopping cart | Phoebe Buffay
Engineering | 4/3/2025 | 4/9/2025 |
High | $70,000.00 | $68,000.00 | 0% |
Completed | - |
Medium | Full Stack Development Remote | React Node.js MongoDB | E-commerce 55 | User Experience |
| 39 | Cart functionality testing | Tom Brown
QA | 4/3/2025 | 4/8/2025 |
High | $10,000.00 | $0.00 | 0% |
Not Started | - |
Low | Testing Remote | Selenium | Functionality Assurance 12 | Verification |
| 40 | Cart performance optimization | Bruce Wayne
Engineering | 4/3/2025 | 4/9/2025 |
Medium | $9,500.00 | $0.00 | 0% |
Not Started | - |
Medium | Performance Remote | React Node.js | Performance Optimization 14 | Efficiency |
| 18 | Sprint 4: Checkout process | Chandler Bing
Engineering | 4/3/2025 | 4/11/2025 |
High | $80,000.00 | $72,000.00 | 0% |
In Progress | - |
High | Backend Development Remote | Node.js Stripe API | Financial 89 | Security |
| 41 | Payment gateway integration testing | Clark Kent
QA | 4/3/2025 | 4/9/2025 |
High | $12,000.00 | $0.00 | 0% |
Not Started | - |
High | Testing Remote | Stripe API Postman | Security Validation 15 | High Stakes |
| 42 | Secure payment integration | Diana Prince
Engineering | 4/3/2025 | 4/11/2025 |
High | $11,000.00 | $0.00 | 0% |
Not Started | - |
High | Security Remote | Node.js Stripe API | PCI Compliance 20 | Mandatory |
| 19 | Sprint 5: User profile and orders | Joey Tribbiani
Engineering | 4/3/2025 | 4/9/2025 |
Medium | $65,000.00 | $0.00 | 0% |
Not Started | - |
Low | Full Stack Development Remote | React Node.js MongoDB | User Management 55 | E-commerce |
| 43 | User profile UI update | John Clark
UX/UI Design | 4/3/2025 | 4/9/2025 |
Medium | $6,500.00 | $0.00 | 0% |
Not Started | - |
Low | Design Remote | Figma | User Experience 9 | Enhancement |
| 44 | Order history backend | Lisa Lane
Engineering | 4/3/2025 | 4/8/2025 |
High | $7,500.00 | $0.00 | 0% |
Not Started | - |
Medium | Backend Development Remote | Node.js MongoDB | Functionality Expansion 11 | Integration |
| 20 | Sprint 6: Search and filtering | Monica Geller
Engineering | 4/3/2025 | 4/9/2025 |
Medium | $70,000.00 | $0.00 | 0% |
Not Started | - |
Medium | Full Stack Development Remote | React Node.js Elasticsearch | Performance 55 | User Experience |
| 45 | Advanced search testing | Lucy West
QA | 4/3/2025 | 4/9/2025 |
High | $8,000.00 | $0.00 | 0% |
Not Started | - |
Medium | Testing Remote | Cypress | Feature Release 10 | Verification |
| 46 | Filtering enhancement | Barry Allen
Engineering | 4/3/2025 | 4/8/2025 |
Medium | $7,000.00 | $0.00 | 0% |
Not Started | - |
Low | Frontend Development Remote | React | UX Enhancement 8 | Usability |
| 21 | Sprint 7: Admin dashboard | Ross Geller
Engineering | 4/3/2025 | 4/9/2025 |
Medium | $60,000.00 | $0.00 | 0% |
Not Started | - |
Low | Frontend Development Remote | React Redux | Administration 34 | Reporting |
| 47 | Admin dashboard design | Bruce Banner
UX/UI Design | 4/3/2025 | 4/9/2025 |
Medium | $6,000.00 | $0.00 | 0% |
Not Started | - |
Low | Design Remote | Figma | Admin Tools 7 | Design |
| 48 | Dashboard analytics module | Arthur Curry
Engineering | 4/3/2025 | 4/8/2025 |
High | $8,500.00 | $0.00 | 0% |
Not Started | - |
Medium | Backend Development Remote | Node.js MongoDB | Data Insights 12 | Critical |
| 22 | Sprint 8: Performance optimization | Chandler Bing
Engineering | 4/3/2025 | 4/9/2025 |
High | $50,000.00 | $0.00 | 0% |
Not Started | - |
Medium | Full Stack Development Remote | React Node.js MongoDB Redis | Optimization 34 | Scalability |
| 49 | Review existing optimizations | Hal Jordan
QA | 4/3/2025 | 4/9/2025 |
Medium | $6,000.00 | $0.00 | 0% |
Not Started | - |
Low | Review Remote | - | Code Review 9 | Review |
| 50 | Implement new optimizations | Oliver Queen
Engineering | 4/3/2025 | 4/9/2025 |
High | $9,000.00 | $0.00 | 0% |
Not Started | - |
Medium | Optimization Remote | React Node.js | Scalability 14 | Enhancement |
| 23 | Quality assurance | Emma Watson
Quality Assurance | 4/16/2025 | 6/10/2025 |
High | $180,000.00 | $72,000.00 | 0% |
In Progress | 14FS |
Medium | Testing Remote | Jest Cypress Selenium | Quality Control 144 | Bug Prevention |
| 24 | Unit testing | Chris Evans
Engineering | 4/16/2025 | 4/30/2025 |
High | $70,000.00 | $42,000.00 | 0% |
In Progress | - |
Low | Testing Remote | Jest | Code Quality 55 | Automated Testing |
| 25 | Integration testing | Scarlett Johnson
Quality Assurance | 5/1/2025 | 5/27/2025 |
High | $65,000.00 | $19,500.00 | 0% |
In Progress | 24FS |
Medium | Testing Remote | Postman Cypress | System Integrity 55 | API Testing |
| 26 | User Acceptance testing | Robert Downey
Quality Assurance | 5/28/2025 | 6/10/2025 |
High | $45,000.00 | $0.00 | 0% |
Not Started | 25FS |
Medium | Testing Remote | TestRail | Stakeholder Approval 34 | Final Validation |
| 27 | Performance optimization | Tony Stark
Engineering | 4/16/2025 | 6/11/2025 |
High | $80,000.00 | $0.00 | 0% |
Not Started | 14FS |
Medium | Development Remote | React Node.js MongoDB Redis | Optimization 89 | Scalability |
| 28 | Frontend optimization | Peter Parker
Engineering | 4/16/2025 | 5/12/2025 |
High | $35,000.00 | $0.00 | 0% |
Not Started | - |
Low | Frontend Development Remote | React Redux | Performance 34 | User Experience |
| 29 | Backend optimization | Steve Rogers
Engineering | 5/13/2025 | 6/11/2025 |
High | $45,000.00 | $0.00 | 0% |
Not Started | 28FS |
Medium | Backend Development Remote | Node.js MongoDB Redis | Database 55 | Caching |
| 30 | Security audit | Natasha Romanoff
Information Security | 9/23/2025 | 10/8/2025 |
High | $40,000.00 | $0.00 | 0% |
Not Started | - |
High | Security Remote | Various security tools | Compliance 34 | Risk Management |
| 31 | Deployment | Nick Fury
DevOps | 10/9/2025 | 10/21/2025 |
High | $50,000.00 | $0.00 | 0% |
Not Started | 27FS |
High | Operations Remote | AWS Docker Kubernetes | Production Release 21 | Go-Live |
| 32 | Infrastructure setup | Maria Hill
DevOps | 10/9/2025 | 10/14/2025 |
High | $25,000.00 | $0.00 | 0% |
Not Started | 30FS |
Medium | Operations Remote | AWS Terraform | Cloud Infrastructure 13 | Scalability |
| 33 | Data migration | Phil Coulson
Data Management | 10/15/2025 | 10/21/2025 |
High | $15,000.00 | $0.00 | 0% |
Not Started | 32FS |
High | Data Remote | MongoDB Custom scripts | Data Integrity 8 | Legacy System |
| 34 | Final deployment | Nick Fury
DevOps | 10/21/2025 | 10/21/2025 |
High | $10,000.00 | $0.00 | 0% |
Not Started | 33FS |
High | Operations Remote | AWS Docker Kubernetes | Go-Live 5 | Production Release |
Jan 2025 | Feb 2025 | Mar 2025 | Apr 2025 | May 2025 | Jun 2025 | Jul 2025 | Aug 2025 | Sep 2025 | Oct 2025 | Nov 2025 |
25 | 26 | 02 | 09 | 16 | 23 | 02 | 09 | 16 | 23 | 30 | 06 | 13 | 20 | 27 | 04 | 11 | 18 | 25 | 01 | 08 | 15 | 22 | 29 | 06 | 13 | 20 | 27 | 03 | 10 | 17 | 24 | 31 | 07 | 14 | 21 | 28 | 05 | 12 | 19 | 26 | 02 | 09 | 16 | 23 |
Presidents' Day
Memorial Day
Independence Day
Labor Day
Columbus Day
Veterans Day
This sample demonstrates the comprehensive capabilities of the Blazor Gantt Chart component by visualizing an e-commerce platform. It precisely displays tasks and milestones across the entire project timeline, from initial planning to final deployment.
The Gantt Chart provides a clear, high-level overview of task progress, dependencies, deadlines, and resource allocation. Its hierarchical structure allows for seamless expansion and collapse of project phases, enabling teams to instantly assess status and maintain precise control over complex schedules.
Customizing column cells and taskbar labels through Column Template and Label Settings enhances advanced data visualization.
Additional essential interactions that enhance analysis and control are also featured:
- Sorting: Quickly reorder tasks by fields such as Start Date, End Date, Duration, or Progress.
- Filtering: Focus on relevant tasks, milestones, or resources by applying various filter criteria.
- Column Resizing: Optimize the width of grid columns for improved readability across different screen sizes.
- Column Menu: Provides quick access to options for showing, hiding, and configuring individual columns.
Key interactive features demonstrated in this sample include:
- Expand/Collapse All Tasks: Click the respective buttons to expand or collapse all tasks in the hierarchy for easier task navigation.
- Zooming Actions: Click the respective buttons to Zoom In, Zoom Out, or Zoom to Fit to change the timeline scale and view tasks at different levels of detail.
- Excel/PDF Export: Click the respective buttons to export the Gantt chart data and visuals in Excel or PDF format for reporting or sharing.
The Project Settings panel offers extensive customization options for the chart's behavior and appearance:
- Row Height: Adjust the vertical spacing of task rows.
- Show Grid Lines: Toggle the visibility of grid lines in the chart area.
- Show Event Markers: Display important project events on the timeline.
- Show Dependencies: Visualize task relationships (for example: Finish to Start, Start to Start).
- Show Task Labels: Display task labels on the chart side.
- Critical Path: Highlight the sequence of tasks that determines the project's shortest possible duration.
- Custom Scheduling: Enable advanced scheduling configurations.
- Work Week: Define the working days for accurate task scheduling.
- Duration Unit: Specify whether task durations are calculated in Hours, Minutes, or Days.
- Timeline Width: Adjust the horizontal width of the timeline view.
- View Type: Utilize the project and resource view mode.
- View Mode: Choose how the Gantt chart content is displayed on splitter alignment:
- Default: Shows both the grid and chart panels.
- Grid: Displays only the task grid panel.
- Chart: Displays only the Gantt chart panel.