Configuration

An object that defines the Gantt widget's configuration options.

See Also

accessKey

Specifies the shortcut key that sets focus on the widget.

Type:

String

Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Boolean

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

allowSelection

Specifies whether users can select tasks in the Gantt.

Type:

Boolean

Default Value: true

View Demo

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        allowSelection: false,
        // ...
    });
});
See Also

columns

An array of columns in the Gantt.

Default Value: undefined

The columns option accepts an array of columns. To configure a column, use a dxTreeListColumn object or specify a data source field (as a string value) to which the column is bound.

View Demo

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        columns: [{
            dataField: "title",
            caption: "Subject",
            width: 300
        }, {
            dataField: "start",
            caption: "Start Date"
        }, "end"
        ],
        // ...
    });
});

dependencies

Configures dependencies.

Type:

Object

Default Value: null

View Demo

Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:

DevExtreme Gantt Chart - Dependencies

The Gantt widget supports the following dependency types:

  • Finish to Start (FS) - The predecessor task's endpoint specifies the successor task's start point.

  • Start to Start (SS) - The predecessor task's start point specifies the successor task's start point.

  • Finish to Finish (FF) - The predecessor task's end point specifies the successor task's end point.

  • Start to Finish (SF) - The predecessor task's start point specifies the successor task's end point.

In a database, you can use any of the following formats (digit or string) to store dependency types:

Dependency Type Supported Values
Finish to Start (FS) 0, "0", "FS", "fs"
Start to Start (SS) 1, "1", "SS", "ss"
Finish to Finish (FF) 2, "2", "FF", "ff"
Start to Finish (SF) 3, "3", "SF", "sf"

Use the dataSource option to bind the widget to a data source, which contains information about dependency types. If the field names in your data source differ from the 'id', 'type', 'predecessorId' and 'successorId' default names, use the keyExpr, typeExpr options to map data fields.

See Also
jQuery
index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        dependencies: {
            dataSource: dependencies,
            keyExpr: "dependencyId",
            typeExpr: "dependencyType",
            predecessorIdExpr: "taskPredecessorId",
            successorIdExpr: "taskSuccessorId"
        },
        //...
    });
});
var dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},    
// ...
];    
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
<dx-gantt ... >
    <dxo-dependencies
        [dataSource]="dependencies" 
        keyExpr="dependencyId"
        typeExpr="dependencyType"
        predecessorIdExpr="taskPredecessorId"
        successorIdExpr="taskSuccessorId" >
    </dxo-dependencies>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dependencies: Dependency[];
    // ...

    constructor(service: Service) {
        this.dependencies = service.getDependencies();
        // ...
    }        
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Dependency, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    providers: [Service],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

export class Dependency {
    dependencyId: number;
    taskPredecessorId: number;
    taskSuccessorId: number;
    dependencyType: number;
} 

let dependencies: Dependency[] = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0 
},
// ...   
]; 
@Injectable()
export class Service {
    getDependencies(): Dependency[] {
        return dependencies;
    }
}
{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}
Vue
App.vue
data.js
<template>
    <DxGantt ... >
        <DxDependencies
            :data-source="dependencies"
            key-expr="dependencyId"
            type-expr="dependencyType"
            predecessor-id-expr="taskPredecessorId"
            successor-id-expr="taskSuccessorId" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxDependencies, 
        // ... 
    } from 'devextreme-vue/gantt';
    import { 
        dependencies, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxDependencies, 
            // ... 
        },
        data() {
            return { 
                dependencies, 
                // ... 
            };
        }
    };
</script>
export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];  
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Dependencies, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    dependencies, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Dependencies 
                    dataSource={dependencies}
                    keyExpr="dependencyId"
                    typeExpr="dependencyType"
                    predecessorIdExpr="taskPredecessorId"
                    successorIdExpr="taskSuccessorId" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;
export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

editing

Configures edit options.

Type:

Object

The widget allows users to add, modify and delete tasks, resources and dependencies. Set the enabled option to true to enable edit functionality.

NOTE
Make sure that your data sources (tasks, resources and dependencies) support edit actions.

View Demo

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        editing: {
            //...
        }
    });
}); 

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#ganttContainer").dxGantt({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-gantt ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt ...
        :element-attr="ganttAttributes">
    </DxGantt>
</template>

<script>
import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    data() {
        return {
            ganttAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    ganttAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Gantt ...
                elementAttr={this.ganttAttributes}>
            </Gantt>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Gantt()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().Gantt() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

firstDayOfWeek

Type:

Number

Default Value: undefined
Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type:

Boolean

Default Value: false

height

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Boolean

Default Value: false

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Gantt

The widget's instance.

element

HTMLElement or jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

Model data. Available only when using Knockout.

Default Value: null

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Gantt

The widget's instance.

element

HTMLElement or jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Gantt

The widget's instance.

element

HTMLElement or jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

See Also

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Gantt

The widget's instance.

fullName

String

The path to the modified option that includes all parent options.

name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.

value any

The modified option's new value.

element

HTMLElement or jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

Model data. Available only if you use Knockout.

Default Value: null

onSelectionChanged

A function that is executed after users select a task or clear its selection.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
component Gantt

The widget's instance.

element

HTMLElement or jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

Model data. Available only if you use Knockout.

selectedRowKey any

The key of the row whose selection state was changed.

Default Value: null

View Demo

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        // ...
        onSelectionChanged: function (e) {
            if (e.selectedRowKey === 2) {
                // your code
            } else {
                // your code
            }
        }
    });
}); 
See Also

resourceAssignments

Configures resource assignments.

Type:

Object

Default Value: null

View Demo

Resource assignments define relationship between tasks and resources.

Use the dataSource option to bind the widget to a data source, which contains resource assignments. If the field names in your data source differ from the 'id', 'resourceId' and 'taskId' default names, use the keyExpr, resourceIdExpr and/or taskIdExpr options to map data fields.

See Also
jQuery
index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        resourceAssignments: {
            dataSource: resourceAssignments,
            keyExpr: "key",
            resourceIdExpr: "resourceKey",
            taskIdExpr: "taskKey"
        },
        //...
    });
});
var resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];    
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
<dx-gantt ... >
    <dxo-resource-assignments 
        [dataSource]="resourceAssignments" 
        keyExpr="key"
        resourceIdExpr="resourceKey" 
        taskIdExpr="taskKey">
    </dxo-resource-assignments>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})    

export class AppComponent {
    resourceAssignments: ResourceAssignment[];
    // ...

    constructor(service: Service) {
        this.resourceAssignments = service.getResourceAssignments();
        // ...
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, ResourceAssignment, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

export class ResourceAssignment {
    id: number;
    taskId: number;
    resourceId: number;
}

const resourceAssignments: ResourceAssignment[] = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...   
]; 
@Injectable()
export class Service {
    getResourceAssignments(): ResourceAssignment[] {
        return resourceAssignments;
    }
}
{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}
Vue
App.vue
data.js
<template>
    <DxGantt ... >
        <DxResourceAssignments 
            :data-source="resourceAssignments"
            key-expr="key"
            resource-id-expr="resourceKey"
            task-id-expr="taskKey" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css';  

    import { 
        DxGantt, 
        DxResourceAssignments, 
        //... 
    } from 'devextreme-vue/gantt';
    import { 
        resourceAssignments, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxResourceAssignments, 
            //... 
        },
        data() {
            return { 
                resourceAssignments, 
                //... 
            };
        }
    };
</script>
export const resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    ResourceAssignments, 
    //... 
} from 'devextreme-react/gantt';
import { 
    resourceAssignments, 
    //... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >  
                <ResourceAssignments 
                    dataSource={resourceAssignments} 
                    keyExpr="key"
                    resourceIdExpr="resourceKey" 
                    taskIdExpr="taskKey" />
            </Gantt>
        );
    }
}
export default App;
export const resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];

resources

Configures task resources.

Type:

Object

Default Value: null

View Demo

You can add resources to a project and assign them to tasks. Resources can be people responsible for tasks, equipment, materials, etc. The Gantt displays resources as labels on the right of the tasks.

DevExtreme Gantt Chart - Resources

Use the dataSource option to bind the widget to a data source, which contains resources. If the field names in your data source differ from the 'id', 'text' and 'color' default names, use the keyExpr, textExpr and/or colorExpr options to map data fields.

See Also
jQuery
index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        resources: {
            dataSource: resources,
            keyExpr: "resourceId",
            textExpr: "title",
            colorExpr: "resourceColor"
        },
        //...
    });
});
var resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
}, 
// ...
];    
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
<dx-gantt ... >
    <dxo-resources 
        [dataSource]="resources" 
        keyExpr="resourceId"
        textExpr="title"
        colorExpr="resourceColor" >
    </dxo-resources>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    resources: Resource[];
    // ...
    constructor(service: Service) {
        this.resources = service.getResources();
        // ...
    }        
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Resource, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [Service],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

export class Resource {
    resourceId: number;
    title: string;
    resourceColor: string;

}

const resources: Resource[] = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getResources(): Resource[] {
        return resources;
    }
}
{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}
Vue
App.vue
data.js
<template>
    <DxGantt ... >
        <DxResources 
            :data-source="resources"
            key-expr="resourceId"
            text-expr="title"
            color-expr="resourceColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css'; 
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxResources, 
        // ... 
    } from 'devextreme-vue/gantt';
    import { 
        resources, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxResources, 
            // ... 
        },
        data() {
            return { 
                resources, 
                // ... 
            };
        }
    };
</script>
export const resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...
];  
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Resources, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    resources, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Resources 
                    dataSource={resources}
                    keyExpr="resourceId"
                    textExpr="title" 
                    colorExpr="resourceColor" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;
export const resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...
];

scaleType

Specifies the zoom level of tasks in the Gantt chart.

Type:

String

Default Value: 'auto'
Accepted Values: 'auto' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years'

The scaleType option specifies the zoom level for tasks when the Gantt widget is initialized or when you call the option() method.

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        scaleType: 'hours',
        // ...
    });
}); 

If the scaleType option is set to "auto", the widget is scaled to fit all tasks in the Gantt chart's visible area.

To browse tasks across various levels of detail in real time, hold the CTRL key and scroll the mouse wheel to zoom (in or out).

selectedRowKey

Allows you to select a row or determine which row is selected.

Type: any
Default Value: undefined

View Demo

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        selectedRowKey: 1,
        // ...
    });
}); 
See Also

showResources

Specifies whether to display task resources.

Type:

Boolean

Default Value: true

View Demo

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        showResources: false,
        // ...
    });
}); 

showRowLines

Specifies whether to show/hide horizontal faint lines that separate tasks.

Type:

Boolean

Default Value: true

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        showRowLines: false,
        // ...
    });
}); 

stripLines[]

Configures strip lines.

Type:

Array<dxGanttStripLine>

Default Value: undefined

View Demo

Strip lines allows you to highlight certain time or time intervals in the chart. Use the start option to specify an individual line or combine it with the end option 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"
        }],
        //...
    });
});

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

taskListWidth

Specifies the width of the task list in pixels.

Type:

Number

Default Value: 300

View Demo

DevExtreme Gantt Chart - Task List

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        taskListWidth: 200,
        // ...
    });
}); 

tasks

Configures tasks.

Type:

Object

Default Value: null

View Demo

DevExtreme Gantt Chart - Tasks

Use the dataSource option to bind the widget to a data source, which contains tasks. If the field names in your data source differ from default names ('id', 'parentId', 'title', 'start', 'end', 'progress', 'color'), use appropriate options (keyExpr, parentIdExpr, etc.) to map data fields.

See Also
jQuery
index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            keyExpr: "taskId", 
            parentIdExpr: "parentTaskId",
            titleExpr: "taskTitle",
            progressExpr: "taskProgress",
            startExpr: "startDate",
            endExpr: "endDate",
            colorExpr: "taskColor"
        },
        //...
    });
});
var tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31
    'taskColor': 'red'
},
// ...
];
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
<dx-gantt ... >
    <dxo-tasks 
        [dataSource]="tasks" 
        keyExpr="taskId"
        parentIdExpr="parentTaskId"
        titleExpr="taskTitle"
        progressExpr="taskProgress"
        startExpr="startDate"
        endExpr="endDate"
        colorExpr="taskColor" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    tasks: Task[];
    // ...
    constructor(service: Service) {
        this.tasks = service.getTasks();
        // ...
    }        
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Task, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [Service],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}
{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}
Vue
App.vue
data.js
<template>
    <DxGantt ... >        
        <DxTasks
            :data-source="tasks"
            key-expr="taskId"
            parent-id-expr="parentTaskId"
            title-expr="taskTitle"
            progress-expr="taskProgress"
            start-expr="startDate"
            end-expr="endDate"
            color-expr="taskColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxTasks, 
        // ... 
    } from 'devextreme-vue/gantt';

    import { 
        tasks, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxTasks, 
            // ... 
        },
        data() {
            return { 
                tasks, 
                // ... 
            };
        }
    };
</script>
export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];  
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Tasks, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    tasks, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Tasks 
                    dataSource={tasks}
                    keyExpr="taskId"
                    parentIdExpr="parentTaskId"
                    titleExpr="taskTitle"
                    progressExpr="taskProgress"
                    startExpr="startDate"
                    endExpr="endDate"
                    colorExpr="taskColor" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;
export const tasks = [{
    'taskId': 1,
    'parentTaskId': 0,
    'taskTitle': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'taskProgress': 31,
    'taskColor': 'red'
},
// ...
];

taskTitlePosition

Specifies a task's title position.

Type:

String

Default Value: 'inside'
Accepted Values: 'inside' | 'outside' | 'none'

Titles can be displayed "inside" or "outside" the the task. Set the position to "none" to hide the title.

DevExtreme Gantt Chart - Task titles

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        taskTitlePosition: 'none',
        // ...
    });
}); 

toolbar

Configures toolbar settings.

Type: dxGanttToolbar
Default Value: null

validation

Configures validation options.

Type:

Object

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        validation: {
            autoUpdateParentTasks: true,
            validateDependencies: true
        },
        // ...
    });
});

visible

Specifies whether the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }