Draggable & Resizable SVG Gantt Chart – Frappe Gantt

Preview:

Description:

Frappe Gantt is a draggable, resizable, multilingual, modern-looking Gantt Chart library written in JavaScript and SVG.

It provides an interactive data visualization solution for Project Management, Resource Scheduling, Production Planning, Marketing Campaigns, and other time series based application scenarios.

See Also:

• Modern SVG Based Chart Library – Frappé Charts
• 10 Best Gantt Chart Plugins In JavaScript

How to use it:

1. Download and import the Frappe Gantt’s files.

<link rel="stylesheet" href="dist/frappe-gantt.css" />
<script src="dist/frappe-gantt.js"></script>

2. Create a container for the Gantt Chart.

<div class="gantt-container"></div>

3. Prepare the data representing your tasks.

const tasks = [
      {
        start: '2023-01-01',
        end: '2023-02-01',
        name: 'Redesign CSSScript.com',
        id: "Task 0",
        progress: 20
      },
      {
        start: '2023-01-15',
        end: '2023-03-15',
        name: 'Redesign jQueryScript.net',
        id: "Task 1",
        progress: 5,
        dependencies: 'Task 0'
      },
      {
        start: '2023-03-01',
        end: '2023-04-15',
        name: 'Redesign VueScript.Com',
        id: "Task 2",
        progress: 10,
        dependencies: 'Task 1'
      },
      {
        start: '2023-05-01',
        end: '2023-06-15',
        name: 'Redesign ReactScript.Com',
        id: "Task 3",
        progress: 5,
        dependencies: 'Task 2'
      },
      {
        start: '2023-05-15',
        end: '2023-07-30',
        name: 'Redesign 365webresources.Com',
        id: "Task 4",
        progress: 0,
        dependencies: 'Task 2'
      },
      {
        start: '2023-08-01',
        end: '2023-09-15',
        name: 'Redesign ScriptByAI.Com',
        id: "Task 5",
        progress: 0,
        dependencies: 'Task 4',
        custom_class: 'bar-milestone'
      },
      {
        start: '2023-10-01',
        end: '2023-11-30',
        name: 'Create A New Website',
        id: "Task 6",
        progress: 0
      }
]

4. Initialize the Gantt Chart and specify the target container.

const myChart = new Gantt(".gantt-container", tasks, {
      // options here
});

5. The library provides six views to fit your projects:

• ‘Quarter Day’
• ‘Half Day’
• ‘Day’ (default)
• ‘Week’
• ‘Month’
• ‘Year’

const myChart = new Gantt(".gantt-container", tasks, {
      view_mode: 'Year',
});

6. Change the language.

const myChart = new Gantt(".gantt-container", tasks, {
      // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
      language: 'en', 
});

7. Add custom HTML to the tooltip popup.

const myChart = new Gantt(".gantt-container", tasks, {
      custom_popup_html: function(task) {
        // the task object will contain the updated
        // dates and progress value
        const end_date = task._end.format('MMM D');
        return `
        <div class="details-container">
          <h5>${task.name}</h5>
          <p>Expected to finish by ${end_date}</p>
          <p>${task.progress}% completed!</p>
        </div>
        `;
      }
});

8. More configuration options.

const myChart = new Gantt(".gantt-container", tasks, {
      header_height: 50,
      column_width: 30,
      step: 24,
      bar_height: 20,
      bar_corner_radius: 3,
      arrow_curve: 5,
      padding: 18,
      date_format: 'YYYY-MM-DD',
      popup_trigger: 'click',
});

9. Callback functions.

const myChart = new Gantt(".gantt-container", tasks, {
      on_click: task => {
        console.log(task);
      },
      on_date_change: (task, start, end) => {
        console.log(task, start, end);
      },
      on_progress_change: (task, progress) => {
        console.log(task, progress);
      },
      on_view_change: (mode) => {
        console.log(mode);
      },
});

10. Change the view mode manually.

myChart.change_view_mode('Week')