Gantt Chart
- Last UpdatedJun 22, 2023
- 1 minute read
You can modify the style for the HTML elements of Gantt Chart using SVG elements and CSS classes.
|
HTML Element |
CSS Class |
|---|---|
|
Title |
.skgantt-title#skgantt-titleid |
|
Start Time and End Time |
.skgantt-datetimetext#skgantt-datetimetextid |
|
Segment Highlight |
.skgantt-segment#skgantt-segmentid |
|
GanttHeader |
.skgantt-header#skgantt-headerid |
|
GanttValue1 |
.skgantt-vl1#skgantt-vl1id |
|
GanttValue2 |
.skgantt-vl2#skgantt-vl2id |
|
GanttValue3 |
.skgantt-vl3#skgantt-vl3id |
Prefix the Custom Style Identifier of a control with the CSS Class name to apply the style to the specific control. For example:
/* gantt1id is the Custom Style Identifier of the Gantt Chart control. */
.gantt1id_skctr
Note: If you plan to use your own CSS file, the Custom Style Identifier that you define in the file must match the value that you specify in the Custom Style Sheet Identifier property in the Appearance tab of the control's properties page. For example: gantt1id
Example
/* Change title color and font to black and Roboto. */
.gantt1id_skctr .skgantt-title#skgantt-titleid
{
fill: black !important;
font-size: 23px !important;
font-family: 'Roboto' !important;
font-weight: 400 !important;
}