All docs
V20.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery 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