### Install ApexGantt via npm

Source: https://context7.com/apexcharts/apexgantt/llms.txt

Install the ApexGantt package using npm. This is the first step before using the library.

```bash
npm install apexgantt
```

--------------------------------

### Column Configuration Examples

Source: https://github.com/apexcharts/apexgantt/blob/main/README.md

Various ways to configure, hide, reorder, and customize columns in the task-list panel.

```javascript
import {ColumnKey} from 'apexgantt';

const gantt = new ApexGantt(element, {
  series: tasks,
  columnConfig: [
    {
      key: ColumnKey.Name,
      title: 'Task Name',
      minWidth: '100px',
      flexGrow: 3,
    },
    {
      key: ColumnKey.StartTime,
      title: 'Start',
      minWidth: '100px',
      flexGrow: 1.5,
    },
    {
      key: ColumnKey.Duration,
      title: 'Duration',
      minWidth: '80px',
      flexGrow: 1,
    },
    {
      key: ColumnKey.Progress,
      title: 'Progress',
      minWidth: '80px',
      flexGrow: 1,
    },
  ],
});
```

```javascript
const gantt = new ApexGantt(element, {
  series: tasks,
  columnConfig: [
    {key: ColumnKey.Name, title: 'Task Name'},
    {key: ColumnKey.Progress, title: 'Progress'},
  ],
});
```

```javascript
columnConfig: [
  {key: ColumnKey.Name, title: 'Task Name'},
  {key: ColumnKey.StartTime, title: 'Start'},
  {key: ColumnKey.Duration, title: 'Duration', visible: false}, // hidden
  {key: ColumnKey.Progress, title: 'Progress'},
],
```

```javascript
columnConfig: [
  {key: ColumnKey.Progress, title: 'Progress'},
  {key: ColumnKey.Name, title: 'Task Name'},
  {key: ColumnKey.StartTime, title: 'Start'},
],
```

```javascript
columnConfig: [
  {key: ColumnKey.Name, title: 'Task Name'},
  {key: ColumnKey.StartTime, title: 'Start'},
  {key: ColumnKey.EndTime, title: 'End', minWidth: '70px', flexGrow: 1.5},
  {key: ColumnKey.Duration, title: 'Duration'},
  {key: ColumnKey.Progress, title: 'Progress'},
],
```

--------------------------------

### Finish-to-Start (FS) Dependency (String Syntax)

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/dependency-types.html

Configures a Finish-to-Start dependency using the legacy string syntax. Task B cannot start until Task A finishes.

```javascript
const base = {
  enableTaskDrag: true,
  enableTaskResize: true,
  viewMode: 'week',
};
// ── FS (string syntax – backwards compat) ──────────────────────────────
new ApexGantt(document.getElementById('gantt-fs'), {
  ...base,
  series: [
    {
      id: 'a',
      name: 'Task A',
      startTime: '01-01-2025',
      endTime: '01-10-2025',
      progress: 100,
    },
    {
      id: 'b',
      name: 'Task B (FS)',
      startTime: '01-11-2025',
      endTime: '01-20-2025',
      dependency: 'a', // plain string → FS
    },
  ],
}).render();
```

--------------------------------

### Start-to-Start (SS) Dependency

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/dependency-types.html

Configures a Start-to-Start dependency. Task B cannot start until Task A starts. The arrow connects the start of Task A to the start of Task B.

```javascript
const base = {
  enableTaskDrag: true,
  enableTaskResize: true,
  viewMode: 'week',
};
// ── SS ─────────────────────────────────────────────────────────────────
new ApexGantt(document.getElementById('gantt-ss'), {
  ...base,
  series: [
    {
      id: 'a',
      name: 'Task A',
      startTime: '01-01-2025',
      endTime: '01-15-2025',
      progress: 60,
    },
    {
      id: 'b',
      name: 'Task B (SS)',
      startTime: '01-03-2025',
      endTime: '01-20-2025',
      dependency: {taskId: 'a', type: 'SS'},
    },
  ],
}).render();
```

--------------------------------

### Task Data Format Example

Source: https://context7.com/apexcharts/apexgantt/llms.txt

Defines the structure for task data, including required fields like id, name, startTime, and optional fields for hierarchy and dependencies.

```javascript
const tasks = [
  {
    id: 'task-1',
    name: 'Design Phase',
    startTime: '01-01-2025',
    endTime: '01-15-2025',
    progress: 75,
    barBackgroundColor: '#8B5CF6',
  },
  {
    id: 'task-2',
    name: 'Development',
    startTime: '01-16-2025',
    endTime: '02-15-2025',
    progress: 30,
    parentId: 'task-1',
    dependency: 'task-1',
  },
  {
    id: 'milestone-1',
    name: 'Release',
    startTime: '02-16-2025',
    type: 'milestone',
    dependency: 'task-2',
  },
];
```

--------------------------------

### FS Dependency with Lag and Lead

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/dependency-types.html

Demonstrates how to add lag (positive offset) and lead (negative offset) to a Finish-to-Start dependency. Lag delays the dependent task's start, while lead allows overlap.

```javascript
const base = {
  enableTaskDrag: true,
  enableTaskResize: true,
  viewMode: 'week',
};
// ── Lag / Lead ─────────────────────────────────────────────────────────
new ApexGantt(document.getElementById('gantt-lag'), {
  ...base,
  series: [
    {
      id: 'a',
      name: 'Task A',
      startTime: '01-01-2025',
      endTime: '01-10-2025',
      progress: 100,
    },
    {
      id: 'b',
      name: 'Task B (FS + 3d lag)',
      startTime: '01-14-2025', // starts 3 days after A finishes (lag=3)
      endTime: '01-22-2025',
      dependency: {taskId: 'a', type: 'FS', lag: 3},
    },
    {
      id: 'c',
      name: 'Task C (FS − 2d lead)',
      startTime: '01-09-2025', // starts 2 days before A finishes (lead=-2)
      endTime: '01-18-2025',
      dependency: {taskId: 'a', type: 'FS', lag: -2},
    },
  ],
}).render();
```

--------------------------------

### Mixed Dependency Types in a Chart

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/dependency-types.html

An example chart combining multiple dependency types (FS, SS, FF, SF) and task hierarchy. This demonstrates a complex project structure.

```javascript
const base = {
  enableTaskDrag: true,
  enableTaskResize: true,
  viewMode: 'week',
};
// ── Mixed ──────────────────────────────────────────────────────────────
new ApexGantt(document.getElementById('gantt-mixed'), {
  ...base,
  series: [
    {
      id: 'project',
      name: 'Project',
      startTime: '01-01-2025',
      endTime: '01-31-2025',
      progress: 40,
    },
    {
      id: 'a',
      name: 'Task A',
      startTime: '01-01-2025',
      endTime: '01-10-2025',
      parentId: 'project',
      progress: 100,
    },
    {
      id: 'b',
      name: 'Task B (FS from A)',
      startTime: '01-11-2025',
      endTime: '01-18-2025',
      parentId: 'project',
      dependency: 'a', // plain string = FS
    },
    {
      id: 'c',
      name: 'Task C'
```

--------------------------------

### Create a Basic Gantt Chart

Source: https://context7.com/apexcharts/apexgantt/llms.txt

Instantiate ApexGantt with a container element and configuration options including task data. Ensure the container element exists in your HTML.

```javascript
import ApexGantt from 'apexgantt';

const ganttOptions = {
  series: [
    {
      id: 'a',
      startTime: '10-11-2024',
      endTime: '11-01-2024',
      name: 'Task 1',
      progress: 65,
    },
    {
      id: 'b',
      startTime: '10-11-2024',
      endTime: '10-26-2024',
      name: 'Subtask 1.1',
      parentId: 'a',
      progress: 65,
    },
  ],
};

const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOptions);
gantt.render();
```

--------------------------------

### Create and Manage Gantt Charts Simultaneously

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/mixed-contexts.html

Demonstrates creating both regular and shadow Gantt charts simultaneously. Includes logic for updating statuses and destroying/recreating charts to test shadow functionality.

```javascript
createBothSimultaneously();
setTimeout(() => {
  updateStatus('test-status', 'Destroying first gantt...');
  destroyRegularGantt();
  setTimeout(() => {
    updateStatus('test-status', 'Recreating first gantt - shadow should still work');
    createRegularGantt();
    updateStatus('test-status', 'Recreated - check if both still work correctly');
  }, 1000);
}, 2000);
```

--------------------------------

### Start-to-Finish (SF) Dependency

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/dependency-types.html

Configures a Start-to-Finish dependency. Task B cannot finish until Task A starts. This is a less common dependency type.

```javascript
const base = {
  enableTaskDrag: true,
  enableTaskResize: true,
  viewMode: 'week',
};
// ── SF ─────────────────────────────────────────────────────────────────
new ApexGantt(document.getElementById('gantt-sf'), {
  ...base,
  series: [
    {
      id: 'a',
      name: 'Task A',
      startTime: '01-01-2025',
      endTime: '01-10-2025',
      progress: 50,
    },
    {
      id: 'b',
      name: 'Task B (SF)',
      startTime: '01-05-2025',
      endTime: '01-15-2025',
      dependency: {taskId: 'a', type: 'SF'},
    },
  ],
}).render();
```

--------------------------------

### Initialize ApexGantt Chart

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/toolbar-demo.html

Initializes the ApexGantt chart with specified options and renders it. Includes event listeners for selection changes.

```javascript
const container = document.getElementById('svg-gantt');
const gantt = new ApexGantt(container, {
  enableSelection: true,
  viewMode: 'month',
  toolbarItems: [
    // LEFT: phase filter — re-renders only matching tasks
    {
      type: 'select',
      label: 'Phase',
      placeholder: 'All phases…',
      position: 'left',
      options: [
        {value: 'discovery', text: 'Discovery'},
        {value: 'design', text: 'Design'},
        {value: 'dev', text: 'Development'},
        {value: 'qa', text: 'QA & Launch'},
      ],
      onChange(value, {selectedTasks}) {
        activePhase = value;
        // Re-render the chart with only the matching tasks
        gantt.update({series: getFilteredTasks()});
        // Re-apply any existing tags after re-render
        setTimeout(() => applyTagsToRows(container), 0);
        log(
          `Phase filter → ${value}`,
          `Showing ${getFilteredTasks().length} task(s). ${selectedTasks.length} were selected (selection cleared on re-render).`,
          'default'
        );
      },
    },
    // "Show all" reset button — also position: left
    {
      type: 'button',
      label: 'All',
      position: 'left',
      tooltip: 'Show all phases',
      onClick() {
        activePhase = null;
        gantt.update({series: allTasks});
        setTimeout(() => applyTagsToRows(container), 0);
        log('Phase filter cleared', 'Showing all 11 tasks', 'default');
      },
    },
    // RIGHT items ──────────────────────────────────────────────────
    {type: 'separator'},
    // Publish — requires selection, shows live count badge, shows toast on click
    {
      type: 'button',
      label: 'Publish',
      icon: icons.send,
      tooltip: 'Publish selected tasks to your backend',
      requiresSelection: true,
      showCount: true,
      onClick({selectedTasks}) {
        const names = selectedTasks.map((t) => t.name).join(', ');
        showToast(`✅ Published ${selectedTasks.length} task(s) to staging`);
        log(`Published ${selectedTasks.length} task(s)`, names, 'success');
      },
    },
    // Copy IDs — disabled fn re-evaluated live
    {
      type: 'button',
      label: 'Copy IDs',
      icon: icons.copy,
      tooltip: 'Copy selected task IDs to clipboard',
      disabled: ({selectedTasks}) => selectedTasks.length === 0,
      onClick({selectedTasks}) {
        const ids = selectedTasks.map((t) => t.id).join(', ');
        navigator.clipboard?.writeText(ids).catch(() => {});
        showToast(`📋 Copied: ${ids}`);
        log('Copied IDs', ids, 'success');
      },
    },
    {type: 'separator'},
    // Tag select — applies visual outline + badge to selected task rows
    {
      type: 'select',
      label: 'Tag',
      placeholder: 'Add tag…',
      options: [
        {value: 'urgent', text: '🔴 Urgent'},
        {value: 'review', text: '🟡 Needs Review'},
        {value: 'done', text: '🟢 Done'},
        {value: 'blocked', text: '⛔ Blocked'},
      ],
      onChange(value, {selectedTasks}) {
        if (selectedTasks.length === 0) {
          log(`Tag "${value}" selected`,
            'No tasks selected — select tasks first',
            'warn'
          );
          showToast('⚠️ Select tasks before tagging');
          return;
        }
        // Record tags and apply visually
        selectedTasks.forEach((t) => {
          taskTags[t.id] = value;
        });
        applyTagsToRows(container);
        const meta = tagMeta[value];
        log(
          `Tagged ${selectedTasks.length} task(s) as "${meta.label}"`,
          selectedTasks.map((t) => t.name).join(', '),
          'success'
        );
        showToast(`${meta.badge} applied to ${selectedTasks.length} task(s)`);
      },
    },
  ],
  series: allTasks,
});
gantt.render();

// Log selection changes
container.addEventListener('selectionChange', (e) => {
  const {selectedIds} = e.detail;
  if (selectedIds.length > 0) {
    log(`Selection changed`,
      `${selectedIds.length} task(s): ${selectedIds.join(', ')}`
    );
  } else {
    log('Selection cleared', null, 'default');
  }
});
```

--------------------------------

### Select Tasks within a Group

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/selection-demo.html

Selects a specific group and all its child tasks using the public API. Provides an example for selecting tasks belonging to 'group-1'.

```javascript
function ganttSelectGroup(groupId) {
  // Example: select a group and all its children via the public API
  const groupTasks = {
    'group-1': ['group-1', 'task-6', 'task-7'],
  };
  gantt.setSelectedTasks(groupTasks[groupId] || []);
}
```

--------------------------------

### Initialize Shadow DOM and Gantt Containers

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/multiple-gantts-in-shadow.html

Sets up the Shadow DOM and creates distinct container elements for two Gantt charts. Ensure the shadow host element exists in your HTML.

```javascript
let ganttInstance1 = null;
let ganttInstance2 = null;
let shadowRoot = null;
let container1 = null;
let container2 = null;

function initializeShadowDOM() {
    const shadowHost = document.getElementById('shadow-host');
    if (!shadowRoot) {
        shadowRoot = shadowHost.attachShadow({mode: 'open'});
    }
    // Clear existing content
    shadowRoot.innerHTML = '';

    // Create containers for two gantts
    const wrapper = document.createElement('div');
    wrapper.style.width = '100%';
    wrapper.style.height = '100%';

    const title1 = document.createElement('h3');
    title1.textContent = 'Gantt Instance 1 - Project Alpha';
    title1.style.margin = '0 0 10px 0';
    title1.style.color = '#007bff';
    container1 = document.createElement('div');
    container1.id = 'gantt-container-1';
    container1.style.width = '100%';
    container1.style.height = '350px';
    container1.style.marginBottom = '20px';
    container1.style.border = '1px solid #007bff';
    container1.style.borderRadius = '4px';

    const title2 = document.createElement('h3');
    title2.textContent = 'Gantt Instance 2 - Project Beta';
    title2.style.margin = '0 0 10px 0';
    title2.style.color = '#28a745';
    container2 = document.createElement('div');
    container2.id = 'gantt-container-2';
    container2.style.width = '100%';
    container2.style.height = '350px';
    container2.style.border = '1px solid #28a745';
    container2.style.borderRadius = '4px';

    wrapper.appendChild(title1);
    wrapper.appendChild(container1);
    wrapper.appendChild(title2);
    wrapper.appendChild(container2);
    shadowRoot.appendChild(wrapper);
}
```

--------------------------------

### Initialize ApexGantt Chart

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/events-demo.html

Configure and render a Gantt chart using ApexGantt. Ensure the container element exists and the options object is correctly defined.

```javascript
const ganttOptions = { tasks: [ { id: 'task-1', startTime: '11-01-2024', endTime: '11-07-2024', name: 'Planning', progress: 100, }, { id: 'task-2', startTime: '11-08-2024', endTime: '11-15-2024', name: 'Development', parentId: 'task-2', progress: 60, }, { id: 'task-2.2', startTime: '11-08-2024', endTime: '11-12-2024', name: 'Frontend Development', parentId: 'task-2', dependency: 'task-2.1', progress: 40, }, { id: 'task-3', startTime: '11-13-2024', endTime: '11-15-2024', name: 'Testing & QA', dependency: 'task-2', progress: 25, }, { id: 'task-4', startTime: '11-16-2024', endTime: '11-20-2024', name: 'Deployment', progress: 0, }, { id: 'milestone-1', startTime: '11-21-2024', name: 'Project Launch', type: 'milestone', dependency: 'task-4', }, ] }; const container = document.getElementById('svg-gantt'); const gantt = new ApexGantt(container, ganttOptions); gantt.render();
```

--------------------------------

### ApexGantt Initialization and Theme Toggling

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/css-theming.html

This section provides JavaScript code for initializing an ApexGantt chart with specific data and options, and demonstrates how to toggle between light and dark themes dynamically.

```APIDOC
## ApexGantt Initialization and Theme Toggling

### Description
This section provides JavaScript code for initializing an ApexGantt chart with specific data and options, and demonstrates how to toggle between light and dark themes dynamically.

### Initialization

```javascript
// Shared Gantt data
const ganttSeries = [
  { id: 'design', name: '🎨 Design', startTime: '01-06-2025', endTime: '01-17-2025', progress: 100 },
  { id: 'wireframes', name: 'Wireframes', parentId: 'design', startTime: '01-06-2025', endTime: '01-10-2025', progress: 100 },
  { id: 'prototypes', name: 'Prototypes', parentId: 'design', dependency: 'wireframes', startTime: '01-13-2025', endTime: '01-17-2025', progress: 100 },
  { id: 'dev', name: '💻 Development', startTime: '01-20-2025', endTime: '02-28-2025', progress: 60 },
  { id: 'frontend-task', name: 'Frontend', parentId: 'dev', dependency: 'prototypes', startTime: '01-20-2025', endTime: '02-14-2025', progress: 75 },
  { id: 'backend-task', name: 'Backend', parentId: 'dev', startTime: '01-20-2025', endTime: '02-21-2025', progress: 55 },
  { id: 'testing', name: '🧪 Testing', dependency: 'dev', startTime: '02-24-2025', endTime: '03-07-2025', progress: 20 },
  { id: 'launch', name: '🚀 Launch', dependency: 'testing', startTime: '03-10-2025', endTime: '03-14-2025', progress: 0 },
];

const ganttOptions = {
  width: '100%',
  height: 420,
  viewMode: 'week',
  enableTaskDrag: false,
  enableTaskResize: false,
  series: ganttSeries,
};

// Instantiate chart
const gantt = new ApexGantt(document.getElementById('gantt-live'), ganttOptions);
gantt.render();
```

### Theme Toggle Logic

```javascript
// Theme toggle logic
function toggleTheme() {
  const isDark = document.body.getAttribute('data-theme') === 'dark';
  if (isDark) {
    document.body.removeAttribute('data-theme');
    document.getElementById('themeIcon').textContent = '🌙';
    document.getElementById('themeLabel').textContent = 'Switch to Dark Mode';
    gantt.update({ theme: 'light' });
  } else {
    document.body.setAttribute('data-theme', 'dark');
    document.getElementById('themeIcon').textContent = '☀️';
    document.getElementById('themeLabel').textContent = 'Switch to Light Mode';
    gantt.update({ theme: 'dark' });
  }
}
```
```

--------------------------------

### Initialize Gantt Chart with Responsive Height

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/responsive-height-test.html

Initializes the ApexGantt chart with its height and width set to '100%' to ensure it adapts to the container. Requires sample task data and a container element.

```javascript
const container = document.getElementById('container'); // Sample data const tasks = [
  {
    id: '1',
    name: 'Project Planning',
    startTime: '2024-01-01',
    endTime: '2024-01-15',
    progress: 100,
  },
  {
    id: '2',
    name: 'Design Phase',
    startTime: '2024-01-10',
    endTime: '2024-02-01',
    progress: 75,
    dependency: '1',
  },
  {
    id: '3',
    name: 'Development',
    startTime: '2024-01-20',
    endTime: '2024-03-15',
    progress: 50,
    dependency: '2',
  },
  {
    id: '4',
    name: 'Testing',
    startTime: '2024-03-01',
    endTime: '2024-03-30',
    progress: 25,
    dependency: '3',
  },
  {
    id: '5',
    name: 'Deployment',
    startTime: '2024-03-25',
    endTime: '2024-04-10',
    progress: 0,
    dependency: '4',
  },
]; // Initialize Gantt with 100% height const gantt = new ApexGantt(document.getElementById('container'), {
  series: tasks,
  height: '100%',
  width: '100%',
  viewMode: 'week',
  enableTooltip: true,
});
gantt.render();
```

--------------------------------

### Create First ApexGantt Instance

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/multiple-gantts-in-shadow.html

Initializes and renders the first Gantt chart within its designated container. If an instance already exists, it will be destroyed before creating the new one.

```javascript
const sampleData1 = [
    {id: 'proj1-task1', startTime: '10-11-2024', endTime: '11-01-2024', name: 'Project 1 - Task 1', progress: 65},
    { id: 'proj1-task2', startTime: '11-02-2024', endTime: '11-15-2024', name: 'Project 1 - Task 2', progress: 25, dependency: 'proj1-task1', },
    {id: 'proj1-task3', startTime: '11-16-2024', endTime: '11-25-2024', name: 'Project 1 - Task 3', progress: 0},
];

function createFirstGantt() {
    try {
        if (!shadowRoot) {
            initializeShadowDOM();
        }
        if (ganttInstance1) {
            ganttInstance1.destroy();
        }
        ganttInstance1 = new ApexGantt(container1, {
            series: sampleData1,
            viewMode: 'week',
            tasksContainerWidth: 200,
        });
        ganttInstance1.render();
        updateStatus('First Gantt created successfully');
    } catch (error) {
        updateStatus(`Error creating first gantt: ${error.message}`);
        console.error('First gantt error:', error);
    }
}
```

--------------------------------

### Initialize Interactive Gantt with Toggle

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/critical-path.html

Sets up an interactive Gantt chart with a button to toggle critical path visibility dynamically.

```javascript
// ── Interactive ─────────────────────────────────────────────────────── const interactiveGantt = new ApexGantt(document.getElementById('gantt-interactive'), { enableCriticalPath: true, enableTaskDrag: true, enableTaskResize: true, viewMode: 'week', series: [ {id: 'i-a', name: 'Requirements', startTime: '01-01-2025', endTime: '01-05-2025', progress: 100}, {id: 'i-b', name: 'Design', startTime: '01-06-2025', endTime: '01-12-2025', progress: 80, dependency: 'i-a'}, { id: 'i-c', name: 'Dev — Core', startTime: '01-13-2025', endTime: '01-26-2025', progress: 40, dependency: 'i-b', }, { id: 'i-d', name: 'Dev — UI', startTime: '01-13-2025', endTime: '01-19-2025', progress: 20, dependency: 'i-b', }, {id: 'i-e', name: 'QA', startTime: '01-27-2025', endTime: '02-02-2025', progress: 0, dependency: 'i-c'}, {id: 'i-f', name: 'Release', startTime: '02-03-2025', endTime: '02-05-2025', progress: 0, dependency: 'i-e'}, ], }); interactiveGantt.render(); document.getElementById('toggle-btn').addEventListener('click', function () { const isOn = this.classList.toggle('active'); this.textContent = `Critical path: ${isOn ? 'ON' : 'OFF'}`; interactiveGantt.update({enableCriticalPath: isOn}); });
```

--------------------------------

### Configure ApexGantt with Baseline Data

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/baseline.html

Initializes the ApexGantt chart with baseline settings enabled and task-specific baseline start/end dates.

```javascript
const ganttOptions = { enableTaskDrag: false, enableTaskResize: false, baseline: { enabled: true, opacity: 0.5, }, series: [ { id: 'design', name: 'Design', startTime: '01-10-2026', endTime: '01-20-2026', progress: 100, baseline: { start: '01-08-2026', end: '01-18-2026', }, }, { id: 'development', name: 'Development', startTime: '01-21-2026', endTime: '02-10-2026', progress: 60, baseline: { start: '01-19-2026', end: '02-05-2026', }, }, { id: 'dev-frontend', name: 'Frontend', parentId: 'development', startTime: '01-21-2026', endTime: '02-03-2026', progress: 75, baseline: { start: '01-19-2026', end: '02-01-2026', }, }, { id: 'dev-backend', name: 'Backend', parentId: 'development', startTime: '01-28-2026', endTime: '02-10-2026', progress: 45, baseline: { start: '01-26-2026', end: '02-05-2026', }, }, { id: 'testing', name: 'Testing', startTime: '02-11-2026', endTime: '02-20-2026', progress: 10, baseline: { start: '02-06-2026', end: '02-14-2026', }, }, { id: 'no-baseline', name: 'Deployment (no baseline)', startTime: '02-21-2026', endTime: '02-25-2026', progress: 0, }, ], }; const gantt = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions); gantt.render();
```

--------------------------------

### Initialize ApexGantt Chart with Nested Data

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/data-parsing.html

Demonstrates how to initialize an ApexGantt chart using nested data structures. Ensure the DOM element exists and the data adheres to the specified parsing configuration.

```javascript
const nestedData = [
  {
    project: {
      task: {
        id: 'T1',
        details: {
          title: 'Design Phase',
          dates: {
            start: '01-01-2024',
            end: '01-15-2024',
          },
        },
      },
      metadata: {
        completion_percentage: 0.75,
        category: 'design',
      },
      styling: {
        colors: {
          bar: '#4A90E2',
          row: '#F0F4F8',
        },
      },
    },
  },
  {
    project: {
      task: {
        id: 'T2',
        details: {
          title: 'Development Phase',
          dates: {
            start: '01-16-2024',
            end: '02-28-2024',
          },
        },
      },
      metadata: {
        completion_percentage: 0.45,
        category: 'task',
      },
      styling: {
        colors: {
          bar: '#50C878',
          row: '#F0F8F0',
        },
      },
    },
  },
];

const ganttOptions = {
  enableTaskDrag: false,
  enableTaskResize: false,
  series: nestedData,
  parsing: {
    id: 'project.task.id',
    name: 'project.task.details.title',
    startTime: 'project.task.details.dates.start',
    endTime: 'project.task.details.dates.end',
    progress: {
      key: 'project.metadata.completion_percentage',
      transform: (value) => value * 100,
    },
    barBackgroundColor: 'project.styling.colors.bar',
    rowBackgroundColor: 'project.styling.colors.row',
  },
};

const chart = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions);
chart.render();
```

--------------------------------

### Initialize and Update Gantt Configuration

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/task-list-columns-demo.html

Functions to build column configurations, compute container widths, and initialize or update the ApexGantt instance.

```javascript
// ── Build columnConfig from current state ──────────────────────────────── function buildColumnConfig() { return columnOrder .filter((key) => visible[key]) .map((key) => { const col = ALL_COLUMNS.find((c) => c.key === key); return {key, title: col.title, minWidth: `${minWidths[key]}px`}; }); } // Compute task list panel width as sum of visible column min-widths + padding function computeTasksContainerWidth() { const visibleKeys = columnOrder.filter((key) => visible[key]); const total = visibleKeys.reduce((sum, key) => sum + minWidths[key], 0); return total + 20; // 20px padding for borders/scrollbar } // ── Gantt init ─────────────────────────────────────────────────────────── const container = document.getElementById('svg-gantt'); const gantt = new ApexGantt(container, { viewMode: 'month', series: tasks, columnConfig: buildColumnConfig(), tasksContainerWidth: computeTasksContainerWidth(), }); gantt.render(); // ── Apply config to chart ──────────────────────────────────────────────── function applyColumns() { const config = buildColumnConfig(); gantt.update({series: tasks, columnConfig: config, tasksContainerWidth: computeTasksContainerWidth()}); updateConfigDisplay(config); syncControls(); } function updateConfigDisplay(config) { const snippet = JSON.stringify( config.map((c) => ({key: c.key, title: c.title, minWidth: c.minWidth})), null, 2 ); document.getElementById('config-display').innerHTML = `<strong>Current columnConfig</strong><br><pre style="margin:6px 0 0;font-size:11px;line-height:1.6">${snippet}</pre>`; } updateConfigDisplay(buildColumnConfig());
```

--------------------------------

### Initialize and Render ApexGantt Chart

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/basic-gantt.html

Defines Gantt chart options and renders the chart. Ensure the target element ('svg-gantt') exists in your HTML.

```javascript
const ganttOptions = {
  enableTaskDrag: false,
  enableTaskResize: false,
  series: [
    {
      id: 'a',
      startTime: '10-11-2024',
      endTime: '11-01-2024',
      name: 'task 1',
      progress: 65,
    },
    {
      id: '5',
      startTime: '10-11-2024',
      endTime: '10-26-2024',
      name: 'subtask 1.1',
      parentId: 'a',
      progress: 65,
    },
    {
      id: '9',
      startTime: '10-11-2024',
      endTime: '10-16-2024',
      name: 'subtask 1.1.1',
      parentId: '5',
      progress: 65,
    },
    {
      id: '10',
      startTime: '10-17-2024',
      endTime: '10-26-2024',
      name: 'subtask 1.1.2',
      parentId: '5',
      dependency: '9',
      progress: 65,
    },
    {
      id: '13',
      startTime: '10-17-2024',
      endTime: '10-23-2024',
      name: 'subtask 1.1.2.1',
      parentId: '10',
      progress: 65,
    },
    {
      id: '14',
      startTime: '10-24-2024',
      endTime: '10-26-2024',
      name: 'subtask 1.1.2.2',
      parentId: '10',
      progress: 65,
    },
    {
      id: '14.1',
      startTime: '10-27-2024',
      name: 'Task 2 Milestone',
      parentId: '10',
      dependency: '14',
      type: 'milestone',
    },
    {
      id: '6',
      startTime: '10-28-2024',
      endTime: '11-01-2024',
      name: 'subtask 1.2',
      parentId: 'a',
      progress: 65,
    },
    {
      id: 'b',
      startTime: '11-02-2024',
      endTime: '11-15-2024',
      name: 'task 2',
      progress: 25,
    },
    {
      id: '7',
      startTime: '11-02-2024',
      endTime: '11-11-2024',
      name: 'subtask 2.1',
      parentId: 'b',
      dependency: '13',
      progress: 65,
    },
    {
      id: '11',
      startTime: '11-02-2024',
      endTime: '11-06-2024',
      name: 'subtask 2.1.1',
      parentId: '7',
      progress: 65,
    },
    {
      id: '12',
      startTime: '11-07-2024',
      endTime: '11-11-2024',
      name: 'subtask 2.1.2',
      parentId: '7',
      dependency: '11',
      progress: 65,
    },
    {
      id: '12.1',
      startTime: '11-12-2024',
      name: 'Task 2 Milestone',
      parentId: '7',
      dependency: '12',
      type: 'milestone',
    },
    {
      id: '8',
      startTime: '11-13-2024',
      endTime: '11-15-2024',
      name: 'subtask 2.2',
      parentId: 'b',
      dependency: '12.1',
      progress: 65,
    },
    {
      id: 'c',
      startTime: '11-16-2024',
      endTime: '11-25-2024',
      name: 'task 3',
      progress: 75,
    },
    {
      id: 'd',
      startTime: '11-26-2024',
      endTime: '12-01-2024',
      name: 'task 4',
      progress: 50,
    },
    {
      id: 'e',
      startTime: '12-02-2024',
      name: 'Project Milestone',
      dependency: 'd',
      type: 'milestone',
    },
  ],
};
const s = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions);
s.render();
```

--------------------------------

### Create Second ApexGantt Instance

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/multiple-gantts-in-shadow.html

Initializes and renders the second Gantt chart. Similar to the first, it handles destruction of any existing instance before creation.

```javascript
const sampleData2 = [
    {id: 'proj2-task1', startTime: '10-15-2024', endTime: '11-05-2024', name: 'Project 2 - Task 1', progress: 80},
    { id: 'proj2-task2', startTime: '11-06-2024', endTime: '11-20-2024', name: 'Project 2 - Task 2', progress: 40, dependency: 'proj2-task1', },
    {id: 'proj2-task3', startTime: '11-21-2024', endTime: '12-01-2024', name: 'Project 2 - Task 3', progress: 10},
];

function createSecondGantt() {
    try {
        if (!shadowRoot) {
            initializeShadowDOM();
        }
        if (ganttInstance2) {
            ganttInstance2.destroy();
        }
        ganttInstance2 = new ApexGantt(container2, {
            series: sampleData2,
            viewMode: 'week',
            tasksContainerWidth: 200,
        });
        ganttInstance2.render();
        updateStatus('Second Gantt created successfully');
    } catch (error) {
        updateStatus(`Error creating second gantt: ${error.message}`);
        console.error('Second gantt error:', error);
    }
}
```

--------------------------------

### ApexGantt Initialization with Drag and Resize Enabled

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/events-demo.html

Initializes the ApexGantt chart with options to enable task dragging, resizing, and editing. It also sets the view mode to 'week'.

```javascript
const ganttOptions = {
  enableTaskDrag: true,
  enableTaskResize: true,
  enableTaskEdit: true,
  viewMode: 'week',
  series: [
    {
      id: 'task-1',
      startTime: '11-01-2024',
      endTime: '11-08-2024',
      name: 'Project Planning',
      progress: 75,
    },
    {
      id: 'task-2',
      startTime: '11-04-2024',
      endTime: '11-12-2024',
      name: 'Development Phase',
      progress: 50,
    },
    {
      id: 'task-2.1',
      startTime: '11-04-2024',
      endTime: '11-07-2024',
      name: 'Backend Development
```

--------------------------------

### Initialize ApexGantt Chart

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/gantt-with-interactions.html

Defines the ganttOptions object with task data and initializes the chart instance. Includes an event listener for task updates.

```javascript
const ganttOptions = { width: '90%', enableTooltip: false, enableTaskDrag: true, enableTaskEdit: true, enableTaskResize: true, series: [ { id: 'a', startTime: '10-11-2024', endTime: '11-01-2024', name: 'task 1', progress: 65, }, { id: '5', startTime: '10-11-2024', endTime: '10-26-2024', name: 'subtask 1.1', parentId: 'a', progress: 65, rowBackgroundColor: '#d7f1fd', barBackgroundColor: '#e368f8', }, { id: '9', startTime: '10-11-2024', endTime: '10-16-2024', name: 'subtask 1.1.1', parentId: '5', progress: 65, }, { id: '10', startTime: '10-17-2024', endTime: '10-26-2024', name: 'subtask 1.1.2', parentId: '5', dependency: '9', progress: 65, }, { id: '13', startTime: '10-17-2024', endTime: '10-23-2024', name: 'subtask 1.1.2.1', parentId: '10', progress: 65, }, { id: '14', startTime: '10-24-2024', endTime: '10-26-2024', name: 'subtask 1.1.2.2', parentId: '10', progress: 65, }, { id: '14.1', startTime: '10-27-2024', name: 'Task 2 Milestone', parentId: '10', dependency: '14', type: 'milestone', }, { id: '6', startTime: '10-28-2024', endTime: '11-01-2024', name: 'subtask 1.2', parentId: 'a', progress: 65, }, { id: 'b', startTime: '11-02-2024', endTime: '11-15-2024', name: 'task 2', progress: 25, }, { id: '7', startTime: '11-02-2024', endTime: '11-11-2024', name: 'subtask 2.1', parentId: 'b', dependency: '13', progress: 65, }, { id: '11', startTime: '11-02-2024', endTime: '11-06-2024', name: 'subtask 2.1.1', parentId: '7', progress: 65, }, { id: '12', startTime: '11-07-2024', endTime: '11-11-2024', name: 'subtask 2.1.2', parentId: '7', dependency: '11', progress: 65, }, { id: '12.1', startTime: '11-12-2024', name: 'Task 2 Milestone', parentId: '7', dependency: '12', type: 'milestone', }, { id: '8', startTime: '11-13-2024', endTime: '11-15-2024', name: 'subtask 2.2', parentId: 'b', dependency: '12.1', progress: 65, }, { id: 'c', startTime: '11-16-2024', endTime: '11-25-2024', name: 'task 3', progress: 75, }, { id: 'd', startTime: '11-26-2024', endTime: '12-01-2024', name: 'task 4', progress: 50, }, { id: 'e', startTime: '12-02-2024', name: 'Project Milestone', dependency: 'd', type: 'milestone', }, ], }; const s = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions); s.render(); s.addEventListener('taskUpdateSuccess', (e) => { const {updatedTask} = e.detail; window.alert(JSON.stringify(updatedTask)); });
```

--------------------------------

### Create Both Gantts Sequentially

Source: https://github.com/apexcharts/apexgantt/blob/main/demo/mixed-contexts.html

Creates the regular DOM Gantt first, waits for 1 second, then creates the Shadow DOM Gantt. Useful for testing sequential initialization.

```javascript
function createBothSequentially() {
    updateStatus('test-status', 'Creating regular gantt first...');
    createRegularGantt();
    setTimeout(() => {
        updateStatus('test-status', 'Creating shadow gantt second...');
        createShadowGantt();
        updateStatus('test-status', 'Both created sequentially - check if both render correctly');
    }, 1000);
}
```

--------------------------------

### Import ApexGantt Library

Source: https://github.com/apexcharts/apexgantt/blob/main/README.md

Import the ApexGantt library into your JavaScript project.

```javascript
import ApexGantt from 'apexgantt';
```