Style and Appearance in Blazor Gantt Chart Component
23 Dec 202315 minutes to read
To modify the Gantt Chart appearance, you need to override the default CSS of Gantt Chart. Find the list of CSS classes and their corresponding section in Gantt Chart. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio.
Section | CSS Class | Purpose of Class |
---|---|---|
Root | e-gantt | This class is in the root element (div) of the gantt chart control. |
Header | e-gridheader | This class is added in the root element of header element. In this class, You can override thin line between header and content of the gantt chart. |
e-table | This class is added at ‘table’ of the gantt chart header. This CSS class makes table width as 100 %. | |
e-columnheader | This class is added at ‘tr’ of the gantt chart header. | |
Grid Content | e-gridcontent | This class is added at root of body content. This is to override background color of the body. |
e-table | This class is added to table of content. This CSS class makes table width as 100 %. | |
e-row | This class is added to rows of gantt chart. | |
e-altrow | This class is added to alternate rows of gantt chart. This is to override alternate row color of the gantt chart. | |
e-rowcell | This class is added to all cells in the gantt chart. This is to override cells appearance and styling. | |
Chart Content | e-gantt-chart | This class is added to the chart side of the gantt chart. |
e-chart-row | This class is added to rows of gantt chart. | |
Timeline | e-timeline-header-container | This class is added to timeline of the gantt chart. |
e-header-cell-label | This class is added to the header cell of the timeline. | |
e-weekend-header-cell | This class is added to the weekend cells. | |
Taskbar | e-taskbar-main-container | This class is added to taskbar of the gantt chart. |
e-gantt-parent-taskbar | This class is added to the parent task bar of the gantt chart. | |
e-gantt-milestone | This class is added to the milestone tasks of the gantt chart. | |
e-gantt-unscheduled-taskbar | This class is added to the unscheduled tasks. | |
e-gantt-manualparenttaskbar | This class is added to the manual scheduled parent taskbar. | |
e-gantt-child-manualtaskbar | This class is added to the manual scheduled child taskbar. | |
e-gantt-unscheduled-manualtask | This class is added to the manual unscheduled tasks. | |
Splitter | e-split-bar | This class is added to the gantt chart splitter. |
e-resize-handler | This class is added to the resize handler of the gantt chart splitter. | |
e-arrow-left | This class is added to the left arrow of the resize handler. | |
e-arrow-right | This class is added to the right arrow of the resize handler. | |
Connector Lines | e-line | This class is added to the connector lines. |
e-connector-line-right-arrow | This class is added to the right arrow of the connector line. | |
e-connector-line-left-arrow | This class is added to the left arrow of the connector line. | |
Labels | e-task-label | This class is added to the task labels. |
e-right-label-container | This class is added to the right label. | |
e-left-label-container | This class is added to the left label. | |
Event Markers | e-event-markers | This class is added to the event markers. |
Baseline | e-baseline-bar | This class is added to the baseline. |
e-baseline-gantt-milestone-container | This class is added to the baseline of milestone tasks. | |
Tooltip | e-gantt-tooltip | This class is added to the tooltip. |
@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="1000px" RenderBaseline="true">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Dependency="Predecessor" ParentID="ParentId" BaselineStartDate="BaselineStartDate"
BaselineEndDate="BaselineEndDate">
</GanttTaskFields>
<GanttLabelSettings RightLabel="TaskName" TValue="TaskData"></GanttLabelSettings>
<GanttEventMarkers>
<GanttEventMarker Day="@Event" Label="Project approval and kick-off"></GanttEventMarker>
</GanttEventMarkers>
</SfGantt>
<style>
.e-split-bar, .e-headercell {
background: #add8e6 !important
}
.e-timeline-header-container, .e-weekend-header-cell {
background: #add8e6 !important;
}
.e-gantt-parent-taskbar-inner-div {
background-color: #7ab748 !important;
}
.e-gantt-parent-progressbar-inner-div {
background-color: #4b732a !important;
}
.e-milestone-top {
border-bottom-color: #ad7a66 !important;
}
.e-milestone-bottom {
border-top-color: #ad7a66 !important;
}
.e-gantt-child-taskbar-inner-div {
background-color: #6d619b !important;
}
.e-gantt-child-progressbar-inner-div {
background-color: #4e466e !important;
}
.e-tooltip-wrap {
background: #a9e0f4 !important;
}
.e-event-marker {
border-left-color: #05088f !important;
}
.e-baseline-bar {
background-color: #fdb9c9 !important;
}
.e-label {
color: #1e74ca !important;
}
.e-line {
border-color: #ab6060fc !important;
}
.e-connector-line-right-arrow {
border-left-color: #ab6060fc !important;
}
</style>
@code{
private List<TaskData> TaskCollection { get; set; }
public DateTime Event = new DateTime(2021, 04, 27);
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime? EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public DateTime? BaselineStartDate { get; set; }
public DateTime? BaselineEndDate { get; set; }
public string Predecessor { get; set; }
public int? ParentId { get; set; }
}
private static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, Predecessor="2", },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", }
};
return Tasks;
}
}
Grid lines
In the Gantt Chart component, you can show or hide the grid lines in the Tree Grid side and chart side by using the GridLines
property.
The following options are available in the Gantt Chart component for rendering the grid lines:
- Horizontal: The horizontal grid lines alone will be visible.
- Vertical: The vertical grid lines alone will be visible.
- Both: Both the horizontal and vertical grid lines will be visible on the Tree Grid and chart sides.
- None: Gridlines will not be visible on Tree Grid and chart sides.
NOTE
By default, the
GridLines
property is set toHorizontal
type.
@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="800px" GridLines="Syncfusion.Blazor.Gantt.GridLine.Both">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
</SfGantt>
@code{
private List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public int? ParentId { get; set; }
}
private static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, }
};
return Tasks;
}
}
See also
NOTE
You can refer to our Blazor Gantt Chart feature tour page for its groundbreaking feature representations. You can also explore our Blazor Gantt Chart example to know how to render and configure the Gantt.