Vue Gantt - stripLines

Configures strip lines.

Default Value: undefined

View Demo

Strip lines allows you to highlight certain time or time intervals in the chart. Use the start property to specify an individual line or combine it with the end property setting to specify a time interval.

DevExtreme Gantt - Strip Lines

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        stripLines: [{
            title: "Start",
            start: tasks[0].start
        }, {
            title: "Final Phase",
            start: tasks[tasks.length - 3].start,
            end: tasks[tasks.length - 1].end,
        }, {
            title: "Current Time",
            start: new Date(),
            cssClass: "current-time"
        }],
        //...
    });
});

cssClass

Specifies the name of the cascading style sheet (CSS) class associated with the strip line.

Type:

String

Default Value: undefined

end

Specifies the end point of the strip line.

Type:

Date

|

Number

|

String

|

Function

Return Value:

Date

|

Number

|

String

The end point.

Default Value: undefined

start

Specifies the start point of the strip line.

Type:

Date

|

Number

|

String

|

Function

Return Value:

Date

|

Number

|

String

The start point.

Default Value: undefined

title

Specifies the strip line's title.

Type:

String

Default Value: undefined