Frontend Weekly
Published in

Frontend Weekly

Getting started with Smart Gantt Chart

In Project Management it is an essential task to track the tasks and events against the schedule or time. To make it easy, the Gantt chart is used which is a pictorial representation of the task and time commonly used for tracking project schedules. Along with just tracking the projects, it gives the glimpse of various tasks or phases in the projects, the relationship between these tasks, the progress and whom the task is assigned to and so on.

Smart elements have introduced the Gantt Chart in its latest release of v4.0. This is a bar chart that describes the dependency between individual task and status. This article describes the integration of the Smart Gantt Chart with your project along with its exciting features.

Getting started with the Gantt Chart


You can install the latest version through NPM or you can download the smart elements to your project folder and unzip your directory.

Folder Structure:

After you have the Smart Elements downloaded the folders lists will be in your local repository.

Integrating HTML file with Smart.Chart:

Below is the list of CSS, Javascript modules and files to work on Gantt Chart.

CSS files

  • smart.default.css — This file is used for the styling of the element.

Javascript module

  • smart.ganttchart.js — it is a JS module loads all script dependencies.

Javascript files

  • smart.element.js — this is Smart Framework.
  • smart.button.js — the JS file containing the definition for the buttons inside the element.
  • smart.scrollbar.js — the JS file containing the definition for the Scroll Bars.
  • smart.splitter.js — the JS file containing the definition for the splitters used to hold the columns and Timeline.
  • — the JS file containing the definition for the Menu which is the Base Class for the Tree that is used to list all tasks.
  • smart.tree.js — the JS file containing the definition for the Task Tree.
  • smart.ganttchart.js — the JS file containing the definition for the element.

Creating a Sample Data:

We will be only dealing with three files, HTML, JS and CSS files. To start with we will first initialize the Gantt Chart by adding the below files in HTML file.

Next, we will set up the tag of smart Gantt Chart in the </body> tag of HTML file.

Our Chart will be displayed here.

<body class=”viewport”><smart-gantt-chart></smart-gantt-chart></body>

Next, we will create a web component Gantt by using the Smart function and then set the properties for the Gantt Chart.

First, we will set the return function with the properties like “durationUnit”, “taskColumn” and “dataSource”.

Next, we will set the CSS style for each class. This enables us to set the various styling options enabling us to identify the different teams.

You can install the http-server and navigate to the http://localhost:8080/index.htm. after running the server. Gantt Chart as shown below will be displayed on your localhost.


Auto Settings:

With Smart Gantt Chart, we can have auto settings for Schedule, Scroll and Height/ Length. With these features, we can make our chart interactive. Auto height feature enables us to increase the length of a task. Auto schedule feature can allow us to automatically delay the next task in the list. You can also have a strict mode for this. An auto-scroll is a feature which will also allow moving the taskbar along the x-axis, the scroll bar automatically scrolls along the timeline. These features are enabled by using expanded as true.

Auto height feature of Gantt Chart

Expanding and Collapsing:

We can expand and collapse the project and task displayed in the chart. This can be achieved by adding the event list bar.

Adding custom Elements:

This allows us to modify the task on-go with just one click. By enabling the custom editor function, we can create the element to display our custom pip-up. We can also have your chart edited for certain dates or days. Eg: Marking Sunday as a holiday.

Enabling and disabling for individual task:

With drag and resize options we can modify while creating the tasks, we can drag or expand the individual tasks.

Smart Gantt Chart with multiple tasks


Tasks duration can be set to different units like a month, day or hours. This can be done using “durationUnit” property.


Smart Chart provides the flexibility of adding multiple tasks, with its min and max task dates. Tasks can be connected also it can be connected to a milestone. Task column can be customized with its contents along with the working and non-working hours.


The Smart Gantt Chart is just released in its new version with lots of loaded features. The Chart can be easily added to the project and can be modified according to requirements. It is flexible enough to add the extra details of the task and time required for each team. The timelines can be changed from the year, month and to days. You can even have task connected along with the milestones. UI is quite interactive to create, edit and drag the tasks. It also allows us to customize the columns and its names. The CSS styling can be well arranged according to the needs.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shanika Wickramasinghe

Shanika Wickramasinghe

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic.