✅
Demo to preview the settings
✅
Introduction
Effortlessly integrate a Gantt / Timeline & Chart Advanced into any app to give users a clear, customizable way to visualize project tasks, milestones, and deadlines. With support for multiple project layers, it simplifies tracking across teams and phases while blending seamlessly with the app’s interface.
Customizable colors, labels, and durations allow the chart to match specific design needs, while interactive features like real-time updates enhance efficiency. The result is a powerful tool that improves organization, planning, and overall project management.
How to setup
Step 1 – Install the Gantt & Timeline Chart Advanced plugin
- Go to the Plugin Tab
- Open your Bubble Editor.
- Navigate to the Plugins tab on the left panel.
- Add Plugins
- Once in the Plugins tab, click the Add Plugins button.
- Search for the Plugin
- Use the search bar to type Gantt & Timeline Chart Advanced.
- Locate the plugin in the search results.
- Install/Buy
- Click Buy and follow the purchase instructions.
- Payment Information (For Paid Plugins)
- Fill in your payment details and make payment.
- Charges will be added to your Bubble billing account.
- Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
- Plugin Installed
- Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Gantt/Timeline Chart element in the Elements panel.
- Drag and drop the element onto your job listing page.
Step 3 – Configure Properties
Select the element and configure its properties in the Property Editor.
Plugin Element Gantt/Timeline Chart
Fields
Title | Description | Type |
Show data labels | Shows data labels on the place of markers. Make sure to turn the makers of if you enable this option. | Checkbox |
Position datalabels | Position of datalabels, top,center,bottom | Dropdown |
Enable sparkline | Sparkline hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas line like for a graph in a sidebar or header. | Checkbox |
------------—-- Series 1 -------------------- | ||
Data name 1 | The name of the data. Will be shown in the tooltip and legend. | Text, Required |
Data type 1 | Data type 1 | App Type |
Data source 1 | Source of data 1 | Data type 1 |
Y-axis label 1 | Needs to be a text | Text, Required |
Start date 1 | Needs to be a date | Date, Required |
End date 1 | Needs to be a date | Date, Required |
------------—-- Series 2 -------------------- | ||
Data name 2 | The name of the data. Will be shown in the tooltip and legend. | Text, Optional |
Data type 2 | Data type 2 | App Type |
Data source 2 | Source of data 2 | Data type 2 |
Y-axis label 2 | Needs to be a text | Text, Optional |
Start date 2 | Needs to be a date | Date, Optional |
End date 2 | Needs to be a date | Date, Optional |
------------—-- Series 3 -------------------- | ||
Data name 3 | The name of the data. Will be shown in the tooltip and legend. | Text, Optional |
Data type 3 | Data type 3 | App Type |
Data source 3 | Source of data 3 | Data type 3 |
Y-axis label 3 | Needs to be a text | Text, Optional |
Start date 3 | Needs to be a date | Date, Optional |
End date 3 | Needs to be a date | Date, Optional |
------------—-- Series 4 -------------------- | ||
Data name 4 | The name of the data. Will be shown in the tooltip and legend. | Text, Optional |
Data type 4 | Data type 4 | App Type |
Data source 4 | Source of data 4 | Data type 4 |
Y-axis label 4 | Needs to be a text | Text, Optional |
Start date 4 | Needs to be a date | Date, Optional |
End date 4 | Needs to be a date | Date, Optional |
------------— Style Options ------------------ | ||
Stroke width | Stroke width | Number, Optional |
Dash width | A value higher of 1 or higher will create a dashed line | Number, Optional |
Color style | Color Style can be solid,gradient | Dropdown |
Data series 1 color | If you want to use dynamic colors, make sure to use RGBA colors instead of HEX colors. | Color |
Data series 2 color | If you want to use dynamic colors, make sure to use RGBA colors instead of HEX colors. | Color |
Data series 3 color | If you want to use dynamic colors, make sure to use RGBA colors instead of HEX colors. | Color |
Data series 4 color | If you want to use dynamic colors, make sure to use RGBA colors instead of HEX colors. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is 'solid'. | Number, Required |
Chart 1- Gradient to color | Chart 1- Gradient to color. | Color |
Chart 2- Gradient to color | Chart 2- Gradient to color. | Color |
Chart 3- Gradient to color | Chart 3- Gradient to color. | Color |
Chart 4- Gradient to color | Chart 4- Gradient to color. | Color |
Gradient type | Type of gradient, horizontal,vertical | Dropdown |
Enable dropshadow | Enables dropshadow | Checkbox |
Dropshadow color | Color of dropshadow | Color |
Dropshadow blur | Value between 0 and 100 | Number, Optional |
Dropshadow vertical offset | The amount for the vertical offset in px | Number, Optional |
Dropshadow horizontal offset | The amount for the horizontal offset in px | Number, Optional |
Dropshadow opacity | A value between 0 and 1 | Number, Optional |
------------—Toolbar options----------------- | ||
Show toolbar | Displays the toolbar options | Checkbox |
Enable download | Enable download in toolbar | Checkbox |
Enable zoom | Enables zoom | Checkbox |
Enable zoomin | Enables zoomin | Checkbox |
Enable zoomout | Enables zoomout | Checkbox |
Enable pan | Enables pan | Checkbox |
Enable reset | Enables reset | Checkbox |
--------------- Grid options ----------------- | ||
Show grid | Displays the grid | Checkbox |
Grid color | Grid color | Color |
Grid stroke dash array | Grid stroke dash array in px | Text, Optional |
Show x-axis grid lines | Displays x-axis grid lines | Checkbox |
Show y-axis grid lines | Displays y-axis grid lines | Checkbox |
Grid padding top | Grid padding in px | Number, Required |
Grid padding bottom | Grid padding in px | Number, Required |
Grid padding left | Grid padding in px | Number, Required |
Grid padding right | Grid padding in px | Number, Required |
----------------- Axis options ---------------- | ||
Show tooltip | Displays the tooltip | Checkbox |
Show category on tooltip | Displays the category inside the tooltip | Checkbox |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox |
Tooltip style | Tooltip style can be dark or light | Dropdown |
X-axis font color | x-axis font color | Color |
X-axis font size | x-axis font size | Number, Required |
Show X-axis border | Displays the X-axis border | Checkbox |
X-axis border height | X-axis border height | Number, Required |
X-axis border color | X-axis border color | Color |
Show X-axis ticks | Show X-axis ticks | Checkbox |
X-axis ticks height | X-axis ticks height | Number, Required |
X-axis ticks color | X-axis ticks color | Color |
Y-axis font color | Y-axis font color | Color |
Y-axis font size | Y-axis font size | Number, Required |
Show Y-axis ticks | Show Y-axis ticks | Checkbox |
Y-axis ticks color | Y-axis ticks color | Color |
Show Y-axis border | Show Y-axis border | Checkbox |
Y-axis border color | Y-axis border color | Color |
Bar height | A value between 0 and 100 | Number, Required |
Show legend | Displays the legend | Checkbox |
Legend position | Legend position top,bottom,left,right | Dropdown |
Legend align | Legend alignment | Dropdown |
Legend font color | Legend font color | Color |
X offset legend | X offset legend | Number, Required |
Y offset legend | Y offset legend | Number, Required |
Legend font size | Legend font size | Number, Required |
Show Y-axis labels | Show Y-axis labels | Checkbox |
Show X-axis labels | Show X-axis labels | Checkbox |
X-axis label offset | The vertical offset of the X-axis labels | Number, Required |
Y-axis labels max width | The vertical offset of the Y-axis labels | Number, Required |
X-axis min value | The minimum value for X-axis. | date (optional) |
-------------- Other options ----------------- | ||
Do not refresh chart | The chart will not refresh automatically. This improves chart performance. You can manually update the chart by running the re-render workflow action. | Checkbox |
Display dates in user timezone | If unchecked, the dates will be displayed in UTC timezone | Checkbox |
Group rows? | Groups all tasks that share the same Y-axis label onto a single row, so multiple date ranges are drawn on one line instead of separate rows.
Useful for compact timelines where one resource or project has several tasks. | Checkbox |
Split Overlapping Rows | When "Group rows?" is enabled, automatically separates overlapping tasks that share the same name into distinct rows to improve chart readability.
Has no effect if "Group rows?" is disabled. | Checkbox |
Border radius | Border radius | Number, Required |
Enable animation | Enables animation | Checkbox |
Animation speed | Animation speed in milliseconds | Number, Required |
Data label font size | The font size of the data labels displayed on the bars, in px. | Number, Required |
Reset hover state on mouse leave | Resets hover state on mouse leave | Checkbox |
Enable color change on hover | Enables color change on hover | Checkbox |
⚠️ Important: The custom tooltip group needs to be visible on the page and placed above the chart. | ||
Custom Tooltip ID | The element ID of a Bubble group you want to use as tooltip. You can access the hover values of the chart as element states. Make sure that the group is visible on page load. | Text, Optional |
Custom tooltip Y offset | Custom tooltip Y offset | Number, Optional |
Show current date annotation | Adds an annotation to the page that indicates the current time | Checkbox |
Annotation color | Annotation color | Color |
Annotation text (optional) | Annotation text (optional) | Text, Optional |
Annotation text color | Annotation text color | Color |
Annotation orientation | Annotation orientation | Dropdown |
------------ Localization options ------------- | ||
Months | January, February, March, April, May, June, July, August, September, October, November, December | Text, Required |
Short months | Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec | Text, Required |
Days | Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday | Text, Required |
Short days | Sun, Mon, Tue, Wed, Thu, Fri, Sat | Text, Required |
"Days" label | "Days" label | Text, Required |
"Day" label | "Day" label | Text, Required |
Exposed States
Title | Description | Type |
Selected Y-axis label | Indicates the selected Y-axis label | Text |
Selected end date | Indicates the selected end date | Date |
Is loaded? | Indicates wether the chart is loading | Yes/No |
Selected index value | Indicates the selected index | Number |
Last selected Y-axis label on hover | Indicates the last selected Y-axis label | Text |
Last selected end date on hover | Indicates the last selected Y-axis label | Date |
PNG URL | Indicates the photo url of the chart | Text |
Last selected index on hover | Indicates the last selected index on hover | Number |
Last selected color code on hover | Indicates the last selected color on hover | Text |
Last selected series name on hover | Indicates the last selected series name on hover | Text |
Selected series name | Indicates the selected series name | Text |
Shown Series Name | Indicates the shown series name | Text |
Element Actions
1) Hide Data Series - This will hide a data series (not deleting it).
Title | Description | Type |
Data serie name | This is the name of the data series you want to hide. | Text, Required |
2) Show Data Series - This will allow you to show a hidden series programmatically.
Title | Description | Type |
Data serie name | This is the name of the data series you want to show. | Text, Required |
3) Append Data series - This will append (add) an extra data series to your chart.
Title | Description | Type |
Data name | Name of the new data series. | Text, Required |
Data source | Data source | App Type |
Chart color | Chart color | Color |
Chart gradient to color | If you have the gradient enabled, you can specify a 'gradient to color'. | Color |
Y-axis label | Y-axis label | Text, Required |
Start date | Start date | Date |
End date | End date | Date |
4) Re-render - This will re-render the chart
5) Generate PNG URL - This will generate a PNG URL
6) Zoom - This will zoom in the chart
Title | Description | Type |
Start date | The date the zoomed view starts from — becomes the left boundary of the X-axis. | Date |
End date | The date the zoomed view ends at — becomes the right boundary of the X-axis. Must be later than the start date. | Date |
7) Remove Data Series - This will remove a data series from the chart by its name.
Title | Description | Type |
Data Name | The name of the data series you want to remove. Must match the series name exactly (case-sensitive). | Text, Required |
8) Reset Zoom Level - This will reset the chart zoom back to its initial level.
Element Events
Title | Description |
Data point is clicked | Triggers when the a data point is clicked |
PNG URL Is Created | Triggers when the a png is created |
Workflow example
How to Append Data Series to Gantt/Timeline Chart
This guide explains how to dynamically add new data series to your Advanced Gantt/Timeline Chart in Bubble.io.
Prerequisites
- Advanced Gantt/Timeline Chart plugin installed
- Chart already initialized with at least one data series
- Understanding of Bubble's workflow actions
Step 1: Create the Workflow Trigger
Choose your trigger event, such as:
- Button click ("When Button 'Add Series' is clicked")
- Page load condition ("When Page is loaded" with conditional)
- Custom event
- Data change event
Step 2: Add the Append Data series Action
Step 3: Configure the Data Source & Visual Styling
Step 4: Test the Workflow
- Preview your page
- Trigger your workflow
- Verify the new series appears
How to Show Data Series
This guide explains how to make a hidden data series visible on your Gantt/Timeline Chart.
Prerequisites
- Advanced Gantt/Timeline Chart plugin installed
- Chart already initialized with at least one data series
- Understanding of Bubble's workflow actions
Step 1: Create the Workflow Trigger
Choose your trigger event, such as:
- Button click ("When Button 'Add Series' is clicked")
- Page load condition ("When Page is loaded" with conditional)
- Custom event
- Data change event
Step 2: Add the Show Data Series Action
Step 3: Configure the Series Name
Enter the exact name of the series to show. Must match the series name from your original data or appended series
Step 4: Test the Workflow
- Preview your page
- Ensure the series is initially hidden (or hide it first)
- Trigger your workflow
- Verify the series appears on the chart and in the legend
How to Hide Data Series
This guide explains how to hide a visible data series on your Gantt/Timeline Chart.
Prerequisites
- Advanced Gantt/Timeline Chart plugin installed
- Chart already initialized with at least one data series
- Understanding of Bubble's workflow actions
Step 1: Create the Workflow Trigger
Choose your trigger event, such as:
- Button click ("When Button 'Hide Completed' is clicked")
- Checkbox unchecked ("When Checkbox is unchecked")
- Dropdown selection
- Custom event
Step 2: Add the Hide Data Series Action
Step 3: Configure the Series Name
Enter the exact name of the series to hide. Must match the series name from your original data or appended series (case-sensitive).
Step 4: Test the Workflow
- Preview your page
- Ensure the series is initially visible
- Trigger your workflow
- Verify the series disappears from the chart (legend item becomes grayed out)
Changelogs
Update 02.02.26 - Version 1.20.0
- New Remove Data Series & Reset Zoom actions.
Update 22.12.25 - Version 1.19.0
- Added new Split Overlapping Rows field.
Update 08.12.25 - Version 1.18.0
- Fixed Hide action.
Update 01.12.25 - Version 1.17.0
- new Shown Series Name state.
Update 01.12.25 - Version 1.16.0
- Bubble Plugin Page Update (Description and GIF).
Update 16.10.25 - Version 1.15.0
- Bubble Plugin Page Update (GIF).
Update 09.07.25 - Version 1.14.0
- Bubble Plugin Page Update (Logo).
Update 13.06.25 - Version 1.13.0
- Marketing update (minor change).
Update 31.05.25 - Version 1.12.0
- Minor update (Marketing update).
Update 30.12.24 - Version 1.11.0
- Added "X-axis min value" field.
Update 16.11.24 - Version 1.10.0
- Minor update (Marketing update).
Update 09.10.24 - Version 1.9.0
- Minor update (Marketing update).
Update 09.10.24 - Version 1.8.0
- Acquired by Zeroqode.
Update 12.08.24 - Version 1.7.0
- Added the Border Radius property.
Update 12.08.24 - Version 1.6.0
- Added localization options!.
Update 02.04.24 - Version 1.5.1
- Added the "Group rows" feature.
Update 08.03.24 - Version 1.5.0
- Dates will default to User's timezone (you can disable this on the chart properties).
Update 24.12.23 - Version 1.4.0
- Fixed a bug regarding the states of the chart.
Update 09.12.23 - Version 1.3.0
- Removed redundant properties.
Update 09.12.23 - Version 1.2.2
- Improved field labels.
Update 20.11.23 - Version 1.2.1
- Patch.
Update 29.09.23 - Version 1.2.0
- Added a new state that contains the series name on chart click.
Update 24.03.23 - Version 1.1.1
- Improvements.
Update 12.01.23 - Version 1.1.0
- Improvements.
Update 12.01.23 - Version 1.0.0
- Launch.
Update 08.01.23 - Version 0.0.3
- Improvements.
Update 08.01.23 - Version 0.0.2
- Improvements.
Update 08.01.23 - Version 0.0.1
- Pre-launch.