# \[New plugin\] Fully Customizable Gantt / Timeline Chart

**URL:** <https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625>\
**Category:** Plugins\
**Created:** [June 5, 2020, 7:42pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625 "2020-06-05T19:42:52Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![pipeleteli](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@pipeleteli](https://forum.bubble.io/u/pipeleteli)\
**Post date:** [June 9, 2020, 8:35pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/21 "2020-06-09T20:35:51Z")

</div>

Hi @Thimo,

Nice plugin, looks awesome!

It would be great if you could be able to set a baseline, so in case you have to reschedule the task you can see directly how late are you. Is this possible?

BR!

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 9, 2020, 8:57pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/22 "2020-06-09T20:57:42Z")

</div>

Hi @pipeleteli!

Great to hear you like the plugin! There is already a current day indicator visible in the ‘day’ viewmode. Is that maybe what you mean with ‘baseline’?

---

<div class="post-metadata">

**Author:** ![pipeleteli](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@pipeleteli](https://forum.bubble.io/u/pipeleteli)\
**Post date:** [June 9, 2020, 9:52pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/23 "2020-06-09T21:52:26Z")

</div>

Thanks for your reply!

Baseline, in this context, would be the original starting and ending dates you planned for your task execution, and when you get behind schedule and repogram your task, your “actual” starting and ending dates will be different than the ones you set for your baseline (original dates). In microsoft project, for instance, you can show the baseline under the task’s progress bar. In the image below, I pointed with a red arrow the black bar which represents the baseline of the task n°17, in this example you can see directly that you are a couple of days late.

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/6/5/65266616bb599a97e81886039c0195762b6d81c3.jpeg)

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 9, 2020, 10:15pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/24 "2020-06-09T22:15:11Z")

</div>

This is not something the plugin automatically does, but because the plugin is based on the data from your database you can when the user edits a task, create a new task with the old starting and ending date . This way a new bar will be visible with the old starting and ending date and will look like the ‘baseline’ you send in your example. You can then also change the progress of this bar to 100 or 0 and maybe change the name in ‘original task’ or something like that 🙂

---

<div class="post-metadata">

**Author:** ![vascolucci](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vascolucci/32/12197_2.png) [@vascolucci](https://forum.bubble.io/u/vascolucci)\
**Post date:** [June 15, 2020, 6:26pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/25 "2020-06-15T18:26:07Z")

</div>

Hi, l love this plugin, it is neat and simple. I have faced a problem, when I have entries with empty Starting date or end date the time line view start with 1970 when all entries with starting and end date are in 2020.

Also, is it possible to show full screen or a view that shows all 12 months (full year).

Thanks

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 15, 2020, 10:37pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/26 "2020-06-15T22:37:51Z")

</div>

Hi @vascolucci!

Great to hear you are enjoying this plugin! 🙂 When you have database entries with an empty starting date, they will automatically start in 1970. It is therefore not recommended to have database entries with empty starting / ending dates. To show a full screen you can create a page or popup that shows the plugin and redirect to that page / show the popup. There is at this time no native feature that exactly does this.

---

<div class="post-metadata">

**Author:** ![vascolucci](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vascolucci/32/12197_2.png) [@vascolucci](https://forum.bubble.io/u/vascolucci)\
**Post date:** [June 16, 2020, 5:57am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/27 "2020-06-16T05:57:08Z")

</div>

> [@Thimo](#):
>
> When you have database entries with an empty starting date, they will automatically start in 1970

But I think that’s not the right behavior, it should ignore empty starting dates so for the plugin to work with different data setup.

In my case, there are data with no Starting date it an optional field, if the Starting date is not ignored I can’t use the plugin unfortunately.

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [June 16, 2020, 6:42am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/28 "2020-06-16T06:42:41Z")

</div>

The gantt is used to display timeline information. How would you want to display it without a date?

Just trying to understand your usecase.

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 16, 2020, 7:52am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/29 "2020-06-16T07:52:39Z")

</div>

> [@vascolucci](#):
>
> But I think that’s not the right behavior, it should ignore empty starting dates so for the plugin to work with different data setup.

You can in your case use Bubble to filter out data entries that have an empty starting / ending date. For example:

 ![2020-06-16 om 09.49.51](https://us1.discourse-cdn.com/bubble/original/3X/9/0/909733069f230065202c6ccffc5301e94b63481a.png)

If you are not using ‘do a search for’ you can use the ‘:filtered’ operator on your loaded data set.

---

<div class="post-metadata">

**Author:** ![vascolucci](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vascolucci/32/12197_2.png) [@vascolucci](https://forum.bubble.io/u/vascolucci)\
**Post date:** [June 17, 2020, 7:31am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/30 "2020-06-17T07:31:54Z")

</div>

I wonder if it is possible to add the ability to color the progress bar from the database field (text)?

This will allow the progress of every task comes with a different color.

Thanks

 ![a44f54f234892999b66cb7a3c3ff6d852c8682e2](https://us1.discourse-cdn.com/bubble/original/3X/a/a/aa00d1711b60b832f3367d3b8c9dab0bc2f950fb.jpeg)

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 17, 2020, 9:39am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/31 "2020-06-17T09:39:43Z")

</div>

@vascolucci As far as I know the JS library that is used for this plugin doesn’t support individual colored bars. If they implement a feature like this in the future I will definitely add it to the plugin. 🙂

---

<div class="post-metadata">

**Author:** ![vascolucci](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vascolucci/32/12197_2.png) [@vascolucci](https://forum.bubble.io/u/vascolucci)\
**Post date:** [June 17, 2020, 9:45am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/32 "2020-06-17T09:45:02Z")

</div>

Thanks 👍

By the way, I have the latest version of the plugin (1.5), although when I use **bar is clicked** part of the chart disappear and the tooltip gets shorter with every click.

Under the the clicked event: I show a group with details of the clicked bar.

how to solve this?

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 17, 2020, 9:56am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/33 "2020-06-17T09:56:40Z")

</div>

I will send you a PM!

---

<div class="post-metadata">

**Author:** ![mattblake](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mattblake/32/149474_2.png) [@mattblake](https://forum.bubble.io/u/mattblake)\
**Post date:** [June 17, 2020, 5:49pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/34 "2020-06-17T17:49:23Z")

</div>

Love this plugin so much! It looks great in the dashboard I’m building.

I’d like to be able to include the chart in emails as an image. I’ve tried each of the Bubble plugins that captures a group as an image, so that I can then include the image in the email. However, each plugin captures an empty space. Any idea why this might be?

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 17, 2020, 6:18pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/35 "2020-06-17T18:18:27Z")

</div>

Hi @mattblake!

I think that those plugins render the group again, but don’t have access to the JS library from plugins. But I am not sure what those plugins actually do. I would recommend to reach out to the plugin authors and ask if that plugin would work with other visual element plugins (like this chart plugin) 🙂

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 18, 2020, 1:02pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/36 "2020-06-18T13:02:58Z")

</div>

**Update 1.6.0**

Multiple big improvements to make the chart work better with multiple instances of the chart on one page.

**Don’t forget to refresh your editor after updating**

---

<div class="post-metadata">

**Author:** ![blake1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/blake1/32/14524_2.png) [@blake1](https://forum.bubble.io/u/blake1)\
**Post date:** [September 2, 2020, 6:50pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/37 "2020-09-02T18:50:09Z")

</div>

Is there a way to control the order of the tasks? I added a sort by to my data, but it doesn’t change the order at all.

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [September 2, 2020, 7:09pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/38 "2020-09-02T19:09:44Z")

</div>

Hi @blake1, you should be able to sort your data to change the order of your tasks. I have just tried it and it works:

**Without sorting:**

 ![2020-09-02 om 21.03.49](https://us1.discourse-cdn.com/bubble/original/3X/6/c/6c898118f316a6e00e70e65ffc0fef113b85b333.png)

**With sorting:**

 ![2020-09-02 om 21.04.02](https://us1.discourse-cdn.com/bubble/original/3X/8/0/808d75cb521e1cb7b821cf413be0cc7c1b34cc8b.png)  
 ![2020-09-02 om 21.04.45](https://us1.discourse-cdn.com/bubble/original/3X/d/9/d9c662d524631eb76ff4dabb99c3791e3edcd216.png)

---

<div class="post-metadata">

**Author:** ![blake1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/blake1/32/14524_2.png) [@blake1](https://forum.bubble.io/u/blake1)\
**Post date:** [September 3, 2020, 2:42pm UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/39 "2020-09-03T14:42:02Z")

</div>

Ah, I got it. I was using the wrong field for sorting! Sorry to bother you!

---

<div class="post-metadata">

**Author:** ![vascolucci](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vascolucci/32/12197_2.png) [@vascolucci](https://forum.bubble.io/u/vascolucci)\
**Post date:** [September 20, 2020, 11:16am UTC](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625/40 "2020-09-20T11:16:43Z")

</div>

Hi @Thimo

I think the plugin break Air Calendar (Full Calendar) when they ar both on the same page. I just tested.

Can you test, just place them both on an empty page you will see that the Air calendar will not show up and will not initialize.

Thanks

[Previous page](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625.md?page=1)

[Next page](https://forum.bubble.io/t/new-plugin-fully-customizable-gantt-timeline-chart/95625.md?page=3)
