🔗 Link to plugin page: https://bubble.io/plugin/advanced-gantt--timeline-chart-1672852685906x293566309129256960
Demo to preview the settings
Live Demo: https://gantt-timeline-demo.bubbleapps.io/
Introduction
Effortlessly integrate an Advanced Gantt & Timeline Chart into your app, providing users with a powerful, customizable tool to visualize project timelines and tasks in a clear, structured format. This plugin allows for seamless chart integration, enabling your app to showcase schedules, deadlines, and milestones in an intuitive Gantt or timeline style.
With Advanced Gantt & Timeline Chart, you can adjust colors, durations, labels, and styles to match your app’s aesthetic and project needs. The chart supports multiple project layers, making it easy to track various phases or team members, allowing for better organization and planning across projects.
This plugin also includes interactive features, such as drag-and-drop adjustments and real-time updates, ensuring your users can make and view changes on the fly. Implement chart-based workflows to enhance project management and provide a visually engaging, efficient experience tailored to your app’s functionality and design requirements.
How to setup
- Install Advanced Gantt & Timeline Chart plugin
- Place the Gantt/Timeline Chart element on the page
Plugin Element Properties
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 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 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 X-axis labels | Number, Required |
-------------- 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? | Group rows? | Checkbox |
Border radius | Border radius | Number, Required |
Enable animation | Enables animation | Checkbox |
Animation speed | Animation speed in milliseconds | 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 |
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 |
Element Actions
1) Hide Data Series
2) Show Data Series
3) Append Data series
4) Re-render
5) Generate PNG URL
6) Zoom
Changelogs
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