Webix Gantt Chart Widget Customization: A Complex Guide for Simple Use

Every project, company, or process manager always has an inherent desire to improve team workflow and increase productivity. Any, even the most robust project, may be inevitably changed because of unexpected events. In this case, software solutions can make it possible to make the necessary adjustments.


There are a huge number of basic tools for optimization and simplification of assigned tasks. When we organize complex processes with a large amount of data, we try to put it in order to better understand it and have a more convenient working process. Indeed, having a platform that not just gathers the information on your project, but also displays the data in the form of tables, diagrams, and charts is really useful. That is why in most of our solutions, we use Webix JavaScript library that has many ready-made tools for data visualization, whether simple or complex.


Gantt chart is a good option for improving planning, and we have the widget for that. So, let’s see how Webix Gantt Chart can be customized to boost your planning and project management experience.


When to Use Webix Gantt Chart


The most striking examples where the maximum use of the Gantt chart functionality is involved can be found in the implementation of the following activities:


Planning and Conducting a Marketing Campaign

Marketing campaigns require large-scale simultaneous collaboration and coordination — as a result, you can easily lose sight of individual moving elements or the bottlenecks. Gantt makes it possible to optimize this process by designating the sequence of tasks, their performers and deadlines. At the same time, different structural divisions of the company will know not only who is responsible for what, but also how their work affects other divisions or a common goal.


Presentation of Results to the Client

If you work in a company that needs to give results as output of its activities, Gantt can be used to present to customers a chronology of expected results and the estimated time spent on achieving them. Having outlined the plans using Gantt, you will have the opportunity to provide the client and other interested parties with a clear understanding of your goals and deadlines for achieving them, and they will know not only the deadline for the completion of part of the project, but also when exactly you will work on it.


Product Launch Planning

In the case of product development and product launches (tangible and intangible), you can use Gantt to outline the entire plan from initial ideas to launch and further work or support. By visualizing everything on Gantt, you will have the opportunity to easily identify conflicts before starting work, anticipate dependencies between stages and get a clear understanding of all events leading to the launch and the time of their occurrence/phased transition.

For a more consistent understanding of the functioning of Gantt and customization for the needs of a potential client, we suggest considering case planning and conducting a marketing campaign. We are revealing the capabilities of the Webix Gantt chart component and how and in what cases it should be used, as well as show the implementation of some features that we worked on with the team on one of the projects. You can find a demo with the implementation of the features described below at the end of the article.


Read Also Clash of the Libraries. Building a Data Dashboard with React, Vue.js, and Webix


Customizing Webix Gantt Chart Up to Your Needs


As we know, the Gantt chart is used to display projects and tasks visually for easier planning. Below we see a project that is divided into several stages, each of which is located on the timeline and has its own duration. Sometimes it is convenient to arrange not only projects and tasks in this form, but also other processes that have a time period.



There is a shopping center with screens placed for advertising. Different companies can buy time for their ads on one or more screens. At the same time, simultaneous placement of several advertisements on the same screen is unacceptable. In this scenario, we have processes — advertising of specific companies — which would be very convenient to place on the timeline. And on the left of the list, we place specific screens. But there is a nuance here. In the case of the standard use of a Gantt for project planning, we have a list of stages on the left, and a stage corresponding to each line on the right. In a case with advertising, we can do the same principle:



The Gantt chart will help structure the project by breaking it into stages for smoother and clearer business management. We have a list of companies that have bought ads, and points where they need to place them. With this display, if we want to change ad display dates, it can be difficult to see where ad space is already taken by another company, especially if there are many such companies. Let’s try another option. List of screens and within the company that occupied this screen with ads:


Continue reading: https://xbsoftware.com/blog/gantt-chart-customization/