Dynamic Gantt Chart Web Component

Preview:

Description:

A lightweight web component that helps developer dynamically render an SVG based Gantt chart to visualize tasks defined in a JavaScript object.

How to use it:

Install the gantt chart web component with NPM.

# NPM
$ npm install @nextbitlabs/gantt-chart --save

Import the component.

<script type="module">
  import '../dist/gantt-chart.umd.js';
</script>

Or load the umd version of the gantt chart web component from a CDN.

<script src="https://cdn.jsdelivr.net/npm/@nextbitlabs/gantt-chart@latest/dist/gantt-chart.umd.js"></script>

Create the gantt chart component with the following attributes:

<gantt-chart
  width="1150"
  height="700"
  margin-top="40"
  margin-left="40"
  margin-right="210"
  margin-bottom="160"
></gantt-chart>

Define the tasks and milestones for the gantt chart.

const data = {
      milestones: [
        {
          id: 1,
          taskId: 6,
          title: 'Milestone B',
          date: 'April 2019'
        },
        {
          id: 2,
          taskId: 7,
          title: 'Milestone A',
          date: 'January 2019'
        },
        {
          id: 3,
          taskId: 11,
          title: 'Milestone C',
          date: 'September 2019'
        },
      ],
      tasks: [
        {
          id: 1,
          title: 'task 1',
          start: 0,
          duration: 4,
          class: 'c1'
        },
        {
          id: 2,
          title: 'task 2',
          start: 4,
          duration: 3,
          class: 'c1'
        },
        {
          id: 3,
          title: 'task 3',
          start: 5,
          duration: 4,
          class: 'c1'
        },
        {
          id: 4,
          title: 'task 4',
          start: 7,
          duration: 2,
          class: 'c1'
        },
        {
          id: 5,
          title: 'task 5',
          start: 8,
          duration: 4,
          class: 'c1',
        },
        {
          id: 6,
          title: 'task 6',
          start: 10,
          duration: 4,
          class: 'c1',
        },
        {
          id: 7,
          title: 'task 7',
          start: 0,
          duration: 4,
          class: 'c3'
        },
        {
          id: 8,
          title: 'task 8',
          start: 11,
          duration: 5,
          class: 'c3',
        },
        {
          id: 9,
          title: 'task 9',
          start: 14,
          duration: 2,
          class: 'c3'
        },
        {
          id: 10,
          title: 'task 10',
          start: 16,
          duration: 5,
          class: 'c1'
        },
        {
          id: 11,
          title: 'task 11',
          start: 21,
          duration: 6,
          class: 'c3'
        },
        {
          id: 12,
          title: 'task 12',
          start: 25,
          duration: 2,
          class: 'c3'
        }
      ]
};

Render the gantt chart on the app.

const element = document.querySelector('gantt-chart');
element.data = data;

Apply custom styling to the gantt chart.

gantt-chart {
  --font-family: 'Lato', sans-serif;
  --background-color: #f6f8fa;
  --font-size: 12px;
  --visibility-tick: visible;
}