# Gantt Chart (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> In the Gantt Chart mode, the Scheduler creates a special row for each event. The row header columns can be used to display additional information about the event. There is also a special [Gantt Chart component](/demo/gantt/index.html) with advanced features.

## Links

- Canonical HTML: /demo/scheduler/gantt.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            viewType: "Gantt",
            cellWidth: 60,
            durationBarMode: "PercentComplete",
            onBeforeEventRender: args => {
                args.data.html = args.data.complete + "%";
                args.data.moveVDisabled = true;
            },
            rowHeaderColumns: [
                {name: "Name"},
                {name: "Details"}
            ]
        });
        dp.init();

        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load sample events
                let start = new DayPilot.Date().getDatePart();
                const events = [];

                for (let i = 0; i < 10; i++) {
                    const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                    const end = start.addHours(duration);
                    const text = `Event ${i}`;

                    const event = {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: text,
                        complete: Math.floor(Math.random() * 101), // 0 to 100
                        columns: [{text: text}, {text: `Event ${i} details`}]
                    };

                    events.push(event);
                    start = end;
                }

                dp.events.list = events;
                dp.update();
            }
        };
        app.init();
```