Blazor Gantt Chart Example - Event Marker Visualization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Task Id | Task Name | Start Date | End Date | Duration | Dependency | Progress |
|---|
| 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 | 2FS | 30 |
| 5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days | 3FS,4FS | 0 |
| 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 | 5FS | 30 |
| 9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days | 5FS | 0 |
| 10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days | 7FS,8FS | 30 |
| 11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days | 9FS | 40 |
| 12 | Research completed | 4/20/2021 | 4/20/2021 | 0 days | 10FS | 30 |
| 13 | Product design and development | 4/21/2021 | 5/10/2021 | 14 days | 30 | |
| 14 | Functionality design | 4/21/2021 | 4/23/2021 | 3 days | 12FS | 30 |
| 15 | Quality design | 4/21/2021 | 4/23/2021 | 3 days | 12FS | 40 |
| 16 | Define reliability | 4/26/2021 | 4/27/2021 | 2 days | 15FS | 30 |
| 17 | Identifying raw materials | 4/26/2021 | 4/27/2021 | 2 days | 15FS | 0 |
| 18 | Define cost plan | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 35 |
| 19 | Define manufacturing cost | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 40 |
| 20 | Define selling cost | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 30 |
| 21 | Development of final design | 4/30/2021 | 5/10/2021 | 7 days | 32 | |
| 22 | Develop dimensions and design | 4/30/2021 | 5/3/2021 | 2 days | 19FS,20FS | 30 |
| 23 | Develop designs to meet industry standard | 5/4/2021 | 5/5/2021 | 2 days | 22FS | 40 |
| 24 | Include all the details | 5/6/2021 | 5/10/2021 | 3 days | 23FS | 30 |
| 25 | CAD - Computer Aided Design | 5/11/2021 | 5/13/2021 | 3 days | 24FS | 0 |
| 26 | CAM - Computer Aided Manufacturing | 5/14/2021 | 5/18/2021 | 3 days | 25FS | 30 |
| 27 | Finalize the design | 5/18/2021 | 5/18/2021 | 0 days | 26FS | 40 |
| 28 | Prototype testing | 5/19/2021 | 5/24/2021 | 4 days | 27FS | 30 |
| 29 | Include feedback | 5/19/2021 | 5/24/2021 | 4 days | 28SS | 0 |
| 30 | Manufacturing | 5/25/2021 | 5/31/2021 | 5 days | 28FS,29FS | 30 |
| 31 | Assembling material into finished goods | 6/1/2021 | 6/7/2021 | 5 days | 30FS | 40 |
| 32 | Final product development | 6/8/2021 | 6/15/2021 | 6 days | 15 | |
| 33 | Important improvement | 6/8/2021 | 6/10/2021 | 3 days | 31FS | 0 |
| 34 | Customer testing and feedback | 6/11/2021 | 6/15/2021 | 3 days | 33FS | 30 |
| 35 | Final product development | 6/16/2021 | 6/21/2021 | 4 days | 30 | |
| 36 | Important improvement | 6/16/2021 | 6/21/2021 | 4 days | 34FS | 30 |
| 37 | Address any unforeseen issues | 6/16/2021 | 6/21/2021 | 4 days | 36SS | 30 |
| 38 | Finalize the product | 6/22/2021 | 7/1/2021 | 8 days | 15 | |
| 39 | Branding the product | 6/22/2021 | 6/25/2021 | 4 days | 37FS | 30 |
| 40 | Marketing and presales | 6/28/2021 | 7/1/2021 | 4 days | 39FS | 0 |
Mar 27, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 |
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 | 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 | 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 |
Research phase
Demand Analysis
Design phase
Competitor Analysis
Production phase
Sales and marketing phase
This sample demonstrates how to highlight important dates within a project timeline using Event Markers in the Blazor Gantt Chart.
EventMarkers serve as visual bookmarks to indicate significant milestones or stages in the project lifecycle. You can display custom labels on specific dates to enhance timeline clarity and communication.
Each Event Marker can be customized using the following properties:
- CssClass - Allows you to apply custom styles to the marker for visual distinction.
- Day - Specifies the date on which the marker should appear.
- Label - Defines the text to be displayed alongside the marker.
- Top - Specifies the vertical position of the event marker label within the Gantt Chart using pixel values. This property can be used to adjust label placement and prevent overlapping when multiple event markers are displayed close together.
Event Markers provide a simple yet effective way to annotate the Gantt Chart with contextual information, improving project tracking and stakeholder visibility.
For further details, refer to the documentation.