✅
Demo to preview the settings
✅
Live Demo: https://chartpreview.bubbleapps.io/
Introduction
54 fully customizable chart types with advanced features for your application! This plugin is developed with the most performant and well known javascript charting libraries.
How to setup
Place the required elements on the page and fill in the fields. You can find a more detailed configuration of each element on the plugin demo page.
Plugin Element Properties
This plugin has 28 visual elements which can be used on the page.
Line Chart
Element Fields
Title | Description | Type |
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 (yes/no) |
Series name | The name of the data. Will be shown in the tooltip. | Text |
Series data | Y-axis data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Chart color | The color for the serie. | Text |
Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Marker shape | The shape of markers. Available options: circle, square | Dropdown |
Marker radius | (number) The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown. | Number |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number (optional) |
Marker color | The color for the serie markers. | Text |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Marker stroke color | The color for the serie markers stroke. | Text |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
Forecast data points | (number) The number of ending data points you want to indicate as forecast or prediction values. | Number |
Forecast fill opacity | (numbner) The opacity for forecast connection points line of series. | Number |
Forecast dash array | (number) If the value is more than 0 the forecast connection points line will be dashed. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Syncing ID (number) | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
To enable the ‘Data point clicked’ event for Area/Line charts the following checkbox should be CHECKED. Also, the marker size should be greater than 0. | ||
Enable events | Markers will require an intersect with the mouse pointer on hover. | Checkbox (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Clear a Selection - This action is used to remove a selection from the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected label when the chart has hovered. | Text |
Last selected value on hover (must have events enabled or custom tooltips) | (number) Returns the last of the selected value when the chart has hovered. | Number |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover (must have events enabled or custom tooltips) | (number) Returns the index of the selected value when the chart has hovered. | Number |
Selection Start Index | (number) Returns the start index of the X-axis label when the part of chart has selected. | Number |
Selection End Index | (number) Returns the stop index of the X-axis label when the part of chart has selected. | Number |
Area Chart
Element 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 (yes/no) |
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 (yes/no) |
Series name | The name of the data. Will be shown in the tooltip. | Text |
Series data | Y-axis data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series category (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series category” field. | Text (optional) |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Chart color | The color for the serie. | Text |
Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Marker shape | The shape of markers. Available options: circle, square | Dropdown |
Marker radius | (number) The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown. | Number |
Marker color | The color for the serie markers. | Text |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number (optional) |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Marker stroke color | The color for the serie markers stroke. | Text |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
Forecast data points | (number) The number of ending data points you want to indicate as forecast or prediction values. | Number |
Forecast fill opacity | (numbner) The opacity for forecast connection points line of series. | Number |
Forecast dash array | (number) If the value is more than 0 the forecast connection points line will be dashed. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Syncing ID (number) | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
To enable the ‘Data point clicked’ event for Area/Line charts the following checkbox should be CHECKED. Also, the marker size should be greater than 0. | ||
Enable events | Markers will require an intersect with the mouse pointer on hover. | Checkbox (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Clear a Selection - This action is used to remove a selection from the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover (must have events enabled or custom tooltips) | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover (must have events enabled or custom tooltips) | (number) Returns the index of the selected value when the chart has hovered. | Number |
Selection Start Index | (number) Returns the start index of the X-axis label when the part of chart has selected. | Number |
Selection End Index | (number) Returns the stop index of the X-axis label when the part of chart has selected. | Number |
Bar Chart
Element Fields
Title | Description | Type |
Horizontal chart? | This option allows for creating a horizontal bar chart. NOTE: doesn’t support crosshairs! | Checkbox (yes/no) |
Show data labels | Shows data labels on the place of markers. Make sure to turn the makers of if you enable this option. | Checkbox (yes/no) |
Position datalabels | The position of the label on the bar. Available options: 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 (yes/no) |
Series name | The name of the data. Will be shown in the tooltip. | Text |
Series data | Y-axis data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series categories (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series category” field. | Text (optional) |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Chart color | The color for the serie. | Text |
Color list | Supply a comma separated list of (hex) colors to give each individual bar a different color. For example: #00A2FF, #666666, #CCCCCC | Text (optional) |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show x-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Crosshair background color | The color for the crosshair background line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Border radius (pixels) | Sets rounded corners around the bars/columns. Do not use values above 10. | Number |
Border radius position | Whether to apply border radius. “around” - both ends, “end” - single end. Available options: around, end | Dropdown |
Hide legend | When using a list of custom colors, you can hide the legend using this checkbox. | Checkbox (yes/no) |
Column width | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. NOTE: for horizontal bar. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Hide data labels for 0 / empty values | This option allows the dige of all 0 or “empty” data labels. | Checkbox (yes/no) |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. Available options: , . | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Hover color | The color theme of chart on hover. Available options: none, lighten, darken | Dropdown |
Active color | The color theme of chart on click. Available options: none, lighten, darken | Dropdown |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Color range based on value | Enables the bars color based on the values. | Checkbox (yes/no) |
Color range start color | The start color of range. | Color |
Color range end color | The end color of range. | Color |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected_label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Donut Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Series data (list) | Chart data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data (list)” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series label (list) | Label data (text that will be displayed in the legend). Must be a list of texts. You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series label (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series label (list)” field. | Text (optional) |
Stroke color | The color for stroke. | Color |
Stroke width | (number) The stroke width of the cell. | Number (optional) |
Color style | This option defines how to color the chart. Available options: solid | Dropdown |
Chart color 1 | The color for the 1st cell. | Text |
Chart color 2 | The color for the 2nd cell. | Color |
Chart color 3 | The color for the 3rd cell. | Color |
Chart color 4 | The color for the 4th cell. | Color |
Chart color 5 | The color for the 5th cell. | Color |
Color list | A list of colors separated by a comma to replace the colors from the color inputs above. | Text (optional) |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Inner donut size | (number) The donut size in percentages relative to the total pie area. Accepted value from 10 to 90. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend font size | The size for the legend text. | Number |
Legend text Y offset | The top offset of legend in px. | Number |
Data label prefix | Will be displayed on the tooltip. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Data label suffix | Will be displayed on the tooltip. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Data label offset | Offset for all data labels. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Display value instead of percentage on data label | Displays the value instead of the percentage on the data label. | Checkbox (yes/no) |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Start angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
End angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable monochrome mode | This will use the specified monochrome color and change the shade to a lighter one for every data point. | Checkbox (yes/no) |
Monochrome color | The color that will be used as monochrome color. | Color |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
⚠️ 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 | The top offset of custom tooltip in px. | Number |
Show labels | This option allows displaying the slice label on the center of the donut when it has hovered. | Checkbox (yes/no) |
Show name | This option allows displaying the slice label on the center of the donut when it has hovered. | Checkbox (yes/no) |
Name font size | The font size of the slice label. | Number |
Value font size | The font size of the slice value. | Number |
Value offset Y | The top offset of the slice value. | Number |
Value color | The font color of the slice value. | Color |
Show total | This option allows displaying the total value on the center of the donut. | Checkbox (yes/no) |
Total font size | The font size of “Total” caption. | Number |
Total color | The font color of “Total” caption. | Color |
Total caption | The text of “Total” caption. | Text |
Element Actions
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title | Description |
Data point is clicked | Triggers when a value on the chart is clicked. The values will be returned in the element state, like ‘Chart’s selected value’ |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Isloaded | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (ignores monochrome mode) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Pie Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Series data (list) | Chart data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data (list)” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series label (list) | Label data (text that will be displayed in the legend). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series label (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series label (list)” field. | Text (optional) |
Stroke color | The color for stroke. | Color |
Stroke width | (number) The stroke width of the cell. | Number (optional) |
Color style | This option defines how to color the chart. Available options: solid | Dropdown |
Chart color 1 | The color for the 1st cell. | Text |
Chart color 2 | The color for the 2nd cell. | Color |
Chart color 3 | The color for the 3rd cell. | Color |
Chart color 4 | The color for the 4th cell. | Color |
Chart color 5 | The color for the 5th cell. | Color |
Color list | A list of colors separated by a comma to replace the colors from the color inputs above. | Text (optional) |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend font size | The size for the legend text. | Number |
Legend text Y offset | The top offset of legend in px. | Number |
Data label prefix | Will be displayed on the tooltip. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Data label suffix | Will be displayed on the tooltip. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Data label offset | Offset for all data labels. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Display value instead of percentage on data label | Displays the value instead of the percentage on the data label. | Checkbox (yes/no) |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Start angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
End angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable monochrome mode | This will use the specified monochrome color and change the shade to a lighter one for every data point. | Checkbox (yes/no) |
Monochrome color | The color that will be used as monochrome color. | Color |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
⚠️ 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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title | Description |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Data point is clicked | This event is triggered when the chart is clicked. |
Exposed states
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (ignores monochrome mode) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Radial Chart
Element Fields
Title | Description | Type |
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 (yes/no) |
Series data | Chart data (list of numbers - amount between 0 and 100). This amount will be formatted as a percentage. Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Convert data to percent | Normally this chart accepts values between 0 and 100 (percentages). If your data doesn’t fall between this range you can check this option. This will automatically convert your data to percent values. | Checkbox (yes/no) |
Series label | Label data (text that will be displayed in the legend and on hover). Must be a list of texts. You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Single data value | If you want to use a single value you can use this field. This will override the ‘Series data’ field. | Number (optional) |
Single label value | If you use a single data value, you can specify a single label value here. | Text (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Chart color 1 | The color for the 1st cell. | Text |
Chart color 2 | The color for the 2nd cell. | Color |
Chart color 3 | The color for the 3rd cell. | Color |
Chart color 4 | The color for the 4th cell. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Track background color | The background color for the track. | Color |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Y axis offset | Y-axis offset of the chart. | Number (optional) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
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 (yes/no) |
Line cap | The displaying the starting and ending points of stroke. “butt” - ends the stroke with a 90-degree angle, “round” - ends the path-stroke with a radius that smooths out the start and end points. Available options: butt, round | Dropdown |
Start angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
End angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number |
Hollow size | (number) The inner space in percentages relative to the total available size of the chart. Accepted value from 10 to 90. | Number |
Show name | This option allows displaying the slice label on the center of the donut when it has hovered. | Checkbox (yes/no) |
Name offset | This is the Y-offset of the ‘name’ label of the chart. Make sure to enable ‘show name’ first. | Number |
Font size name | The font size of the slice label. | Number |
Show value | This option allows displaying the slice value on the center of the pie when it has hovered. | Checkbox (yes/no) |
Value offset | The top offset of the slice value. | Number |
Font size value | The font size of the slice value. | Number |
Value font color | The font color of the slice value. | Color |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Enable monochrome mode | This will use the specified monochrome color and change the shade to a lighter one for every data point. | Checkbox (yes/no) |
Monochrome color | The color that will be used as monochrome color. | Color |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Element Actions
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Gantt/Timeline Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
Position datalabels | The position of the label on the bar. Available options: 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 (yes/no) |
Data name 1 | The name of the 1st serie. Will be shown in the tooltip. | Text (optional) |
Data type 1 | The data type with "category", "start date" and "end date" characteristics. | App Type (optional) |
Data source 1 | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the "Data type 1" field. | Item reperesenting Data type 1 (optional) |
Y-axis label 1 | Objects field that represents the category. | Filed of Data type 1, represent Text, image or file (optional) |
Start date 1 | Objects field that represents the start date. | Filed of Data type 1, represent Date |
End date 1 | Objects field that represents the end date. | Filed of Data type 1, represent Date |
Custom Y-axis labels 1 (optional) | Comma separated Y-axis labels for data series 1. IMPORTANT: The number of label items need to be the same as the data source otherwise the labels will NOT match up. | Text (optional) |
Data name 2 | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Data type 2 | The data type with "category", "start date" and "end date" characteristics. | App Type (optional) |
Data source 2 | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the "Data type 2" field. | Item reperesenting Data type 2 (optional) |
Y-axis label 2 | Objects field that represents the category. | Filed of Data type 2, represent Text, image or file (optional) |
Start date 2 | Objects field that represents the start date. | Filed of Data type 2, represent Date |
End date 2 | Objects field that represents the end date. | Filed of Data type 2, represent Date |
Custom Y-axis labels 2 (optional) | Comma separated Y-axis labels for data series 2. IMPORTANT: The number of label items need to be the same as the data source otherwise the labels will NOT match up. | Text (optional) |
Data name 3 | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Data type 3 | The data type with "category", "start date" and "end date" characteristics. | App Type (optional) |
Data source 3 | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the "Data type 3" field. | Item reperesenting Data type 3 (optional) |
Y-axis label 3 | Objects field that represents the category. | Filed of Data type 3, represent Text, image or file (optional) |
Start date 3 | Objects field that represents the start date. | Filed of Data type 3, represent Date |
End date 3 | Objects field that represents the end date. | Filed of Data type 3, represent Date |
Custom Y-axis labels 3 (optional) | Comma separated Y-axis labels for data series 3. IMPORTANT: The number of label items need to be the same as the data source otherwise the labels will NOT match up. | Text (optional) |
Data type 4 | The data type with "category", "start date" and "end date" characteristics. | App Type (optional) |
Data name 4 | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Data source 4 | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the "Data type 4" field. | Item reperesenting Data type 4 (optional) |
Y-axis label 4 | Objects field that represents the category. | Filed of Data type 4, represent Text, image or file (optional) |
Start date 4 | Objects field that represents the start date. | Filed of Data type 4, represent Date |
End date 4 | Objects field that represents the end date. | Filed of Data type 4, represent Date |
Custom Y-axis labels 4 (optional) | Comma separated Y-axis labels for data series 4. IMPORTANT: The number of label items need to be the same as the data source otherwise the labels will NOT match up. | Text (optional) |
Stroke width | (number) The stroke width of the bar. | Number (optional) |
Dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the bars. Available options: solid, gradient | Dropdown |
Data series 1 color | The color for the 1st serie. | Text |
Data series 2 color | The color for the 2nd serie. | Text |
Data series 3 color | The color for the 3rd serie. | Color |
Data series 4 color | The color for the 4th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is 'solid'. | Number |
Chart 1- Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Chart 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Chart 3 - gradient to color | The 2nd gradient color for the 3rd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Chart 4 - gradient to color | The 2nd gradient color for the 4th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: center, left, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
Y-axis labels max width | (number) The max height for the X-axis labels when they are rotated. | Number |
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 (yes/no) |
Display dates in user timezone | If unchecked, the dates will be displayed in UTC timezone. | Checkbox (yes/no) |
Group rows? | Enables the grouping of categories. | Checkbox (yes/no) |
Border radius | Sets rounded corners around the bars/columns. Do not use values above 10. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn't being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Show current date annotation | Adds an annotation to the page that indicates the current time. | Checkbox (yes/no) |
Annotation color | The color for filling the range between both provided values. | Color |
Annotation text (optional) | (text) The text, which represents the annotation. | Text |
Annotation text color | The color for the text from the label. | Color |
Annotation orientation | The orientation for the label. Available options: horizontal, vertical | Dropdown |
X-Axis Zoom Start Date | This will set the zoom of the Gantt chart to your specified start date. | Date (optional) |
X-Axis Zoom End Date | This will set the zoom of the Gantt chart to your specified end date. | Date (optional) |
Use JSON array as data series | Enables series insertion thru the JSON format. | Checkbox (yes/no) |
JSON array | (optional) Adds more series to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text (optional) |
Months | The long names of months. | Text |
Short months | The short names of months. | Text |
Days | The long names of days. | Text |
Short days | The short names of days. | Text |
“Days” label | Customized label for "Days" notation. | Text |
“Day” label | Customized label for "Day" notation. | Text |
Element Actions
Zoom - This action is used to zoom the square of the chart.
Fields
Title | Description | Type |
Start date | (date) The start date for zoomed square. | Date |
End date | (date) The end date for zoomed square. | Date |
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to show. | Text |
Append Data series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Data name | Name of the new data series. | Text |
Data type | The data type with "category", "start date" and "end date" characteristics. | App Type |
Data source | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the "Data type" field. | Item reperesenting Data type |
Chart color | The color for the new serie. | Color |
Chart gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Y-axis label | Objects field that represents the category. | Filed of Data type, represent Text, image or file (optional) |
Start date | Objects field that represents the start date. | Filed of Data type, represent Date |
End date | Objects field that represents the end date. | Filed of Data type, represent Date |
Custom Y-axis labels (optional) | Comma separated Y-axis labels for the data series. IMPORTANT: The number of label items need to be the same as the data source otherwise the labels will NOT match up. | Text (optional) |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected Y-axis label | (text) Returns the selected Y-axis label when the chart has clicked. | Text |
Selected end date | (date) Returns the selected end date of value when the chart has clicked. | Date |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected Y-axis label on hover | (text) Returns the last of the selected Y-axis label when the chart has hovered. | Text |
Last selected end date on hover | (date) Returns the selected end date of value when the chart has hovered. | Date |
PNG URL | (text) Returns the generated PNG url after execution of the "Generate PNG URL" action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Selected series name | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Area Chart (Multiple Series)
Element 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 (yes/no) |
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text (optional) |
Series 1 data | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 1 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 1 data” field. | Text (optional) |
Series 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 2 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 2 data” field. | Text (optional) |
Series 3 name | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Series 3 data | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 3 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 3 data” field. | Text (optional) |
Series 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Series 4 data | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 4 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 4 data” field. | Text (optional) |
Series 5 name | The name of the 5th serie. Will be shown in the tooltip. | Text (optional) |
Series 5 data | Y-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 5 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 5 data” field. | Text (optional) |
Series 6 name | The name of the 6th serie. Will be shown in the tooltip. | Text (optional) |
Series 6 data | Y-axis data for serie 6 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 6 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 6 data” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series category (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series category” field. | Text (optional) |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Text |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Series 5 color | The color for the 5th serie. | Color |
Series 6 color | The color for the 6th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Series 1 - Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Series 3 - Gradient to color | The 2nd gradient color for the 3rd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 4 - Gradient to color | The 2nd gradient color for the 4th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 5 - Gradient to color | The 2nd gradient color for the 5th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 6 - Gradient to color | The 2nd gradient color for the 6th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Marker shape | The shape of markers. Available options: circle, square | Dropdown |
Marker radius | (number) The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown. | Number |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number (optional) |
Series 1 - Marker color | The color for the 1st serie markers. | Text |
Series 2 - Marker color | The color for the 2nd serie markers. | Text |
Series 3 - Marker color | The color for the 3rd serie markers. | Color |
Series 4 - Marker color | The color for the 4th serie markers. | Color |
Series 5 - Marker color | The color for the 5th serie markers. | Color |
Series 6 - Marker color | The color for the 6th serie markers. | Color |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Series 1 - Marker stroke color | The color for the 1st serie markers stroke. | Text |
Series 2 - Marker stroke color | The color for the 2nd serie markers stroke. | Text |
Series 3 - Marker stroke color | The color for the 3rd serie markers stroke. | Color |
Series 4 - Marker stroke color | The color for the 4th serie markers stroke. | Color |
Series 5 - Marker stroke color | The color for the 5th serie markers stroke. | Color |
Series 6 - Marker stroke color | The color for the 6th serie markers stroke. | Color |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Stack charts | Stack the graphs on top of each other. | Checkbox (yes/no) |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
Forecast data points | (number) The number of ending data points you want to indicate as forecast or prediction values. | Number |
Forecast fill opacity | (numbner) The opacity for forecast connection points line of series. | Number |
Forecast dash array | (number) If the value is more than 0 the forecast connection points line will be dashed. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
2nd Y-axis title | (optional) (text) The title for the 2nd Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Animation delay | (number) This value represents the waiting time in milliseconds before animation. | Number |
Syncing ID | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Enable events | Markers will require an intersect with the mouse pointer on hover. | Checkbox (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Replace 0 with null (Y-axis) | This option allows to replacement of all 0 values from provided data. | Checkbox (yes/no) |
Replace null/undefined with previous | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Show cumulative data | Displays the cumulative sum of series data labels when the chart is stacked. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
2nd Y-axis series name | (optional) (text) The series name to assign for the second Y-axis. Please provide one of the series names that was assigned for one of the series. | Text (optional) |
2nd Y-axis suffix | (optional) (text) Suffix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis prefix | (optional) (text) Prefix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis min value | Force the 2nd Y-axis to start from a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
2nd Y-axis max value | Force the 2nd Y-axis to stop at a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
Use JSON array as data series | Enables series insertion thru the JSON format. | Checkbox (yes/no) |
JSON array | (optional) Adds more series to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text (optional) |
Enable point annotations | Enables point annotation insertion thru the JSON format. | Checkbox (yes/no) |
Point annotation JSON | Adds the point annotations to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text |
Element Actions
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Series name | Name of the new data series. | Text |
Data series | Y-axis data for the new chart (list of numbers). | Number (optional) |
Data series (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Data series” field. | Text (optional) |
Chart color | The color for the new serie. | Color |
Gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Marker color | The color for the new serie markers. | Color |
Marker stroke color | The color for the new serie markers stroke. | Color |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Replace 0 with null (Y-axis) | This option allows to replacement of all 0 values from provided data. | Checkbox (yes/no) |
Replace null with previous | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Show cumulative data | Displays the cumulative sum of series data labels when the chart is stacked. | Checkbox (yes/no) |
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to show. | Text |
Update Appended Data Series - This action is used to update a data series of existent serie from the chart.
Fields
Title | Description | Type |
Series name to update | The name of the appended data series you want to update. | Text |
Updated data series | The data of the appended data series you want to update. | Number |
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Remove All Appended Data Series - This action is used to remove all appended data series from the chart.
Clear a Selection - This action is used to remove a selection from the chart.
Remove Appended Data Series - This action is used to remove an appended data series from the chart.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to remove. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover (must have events enabled or custom tooltips) | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover (must have events enabled or custom tooltips) | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover (must have events enabled or custom tooltips) | (number) Returns the series name of the selected value when the chart has hovered. | Text |
Data series 1 | (list of numbers) Returns the 1st series data. | Number |
Data series 2 | (list of numbers) Returns the 2nd series data. | Number |
Data series 3 | (list of numbers) Returns the 3rd series data. | Number |
Data series 4 | (list of numbers) Returns the 4th series data. | Number |
Data series 5 | (list of numbers) Returns the 5th series data. | Number |
Data series 6 | (list of numbers) Returns the 6th series data. | Number |
Selection Start Index | (number) Returns the start index of the X-axis label when the part of chart has selected. | Number |
Selection End Index | (number) Returns the stop index of the X-axis label when the part of chart has selected. | Number |
Bar Chart (Multiple Series)
Element Fields
Title | Description | Type |
Horizontal chart? | This option allows for creating a horizontal bar chart. NOTE: doesn’t support crosshairs! | Checkbox (yes/no) |
Show data labels | Shows data labels on the place of markers. Make sure to turn the makers of if you enable this option. | Checkbox (yes/no) |
Position datalabels | The position of the label on the bar. Available options: 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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text (optional) |
Series 1 data (list) | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 1 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 1 data (list)” field. | Text (optional) |
Series 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data (list) | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 2 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 2 data (list)” field. | Text (optional) |
Series 3 name | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Series 3 data (list) | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 3 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 3 data (list)” field. | Text (optional) |
Series 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Series 4 data (list) | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 4 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 4 data (list)” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series categories (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series category” field. | Text (optional) |
Stroke width | (number) The stroke width of the bar. | Number (optional) |
Use transparent stroke color | If enabled it makes the strokes transparent. Great for when you want to have a ‘gap’ between the bars. | Checkbox (yes/no) |
Dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the bars. Available options: solid, gradient | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Text |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Series 1- Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Series 3 - Gradient to color | The 2nd gradient color for the 3rd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 4 - Gradient to color | The 2nd gradient color for the 4th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Reverse series order on tooltip | Allows to inverse the display order of series on the tooltip. NOTE: It is helpful when the "Stack columns" field is checked! | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Crosshair background color | The color for the crosshair background line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Stack columns | Stack the two columns on top of each other. | Checkbox (yes/no) |
Stretch stack to 100% | This will stretch the stacked chart to 100% height. You have to check the ‘Stack columns’ option for this to work. The values on the data labels will be replaced by percentages. | Checkbox (yes/no) |
Column width | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. NOTE: for horizontal bar. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Y-axis label align | The label alignment on the Y-axis. Available options: left, center, right. | Dropdown |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
2nd Y-axis title | (optional) (text) The title for the 2nd Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Border radius (pixels) | Sets rounded corners around the bars/columns. Do not use values above 10. | Number |
Border radius position | Whether to apply border radius. “around” - both ends, “end” - single end. Available options: around, end | Dropdown |
Border radius stacked | Border radius when stacked. Available options: all, last | Dropdown |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Hide data labels for 0 / empty values | This option allows the dige of all 0 or “empty” data labels. | Checkbox (yes/no) |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
2nd Y-axis series name | (optional) (text) The series name to assign for the second Y-axis. Please provide one of the series names that was assigned for one of the series. | Text (optional) |
2nd Y-axis prefix | (optional) (text) Prefix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis suffix | (optional) (text) Suffix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis min value | Force the 2nd Y-axis to start from a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
2nd Y-axis max value | Force the 2nd Y-axis to stop at a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
2nd Y-axis label align | The label alignment on the 2nd Y-axis. Available options: left, center, right. | Dropdown |
Use JSON array as data series | Enables series insertion thru the JSON format. | Checkbox (yes/no) (optional) |
JSON array | (optional) Adds more series to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text (optional) |
Enable point annotations | Enables point annotation insertion thru the JSON format. | Checkbox (yes/no) |
Point annotation JSON | Adds the point annotations to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text |
Element Actions
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to show. | Text |
Append Data series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Series name | Name of the new data series. | Text |
Series data (list) | Y-axis data for the new chart (list of numbers). | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data (list)” field. | Text (optional) |
Chart color | The color for the new serie. | Color |
Chart gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Re-render - This action is used to redraw the chart.
Update Appended Data Series - This action is used to update a data series of existent serie from the chart.
Fields
Title | Description | Type |
Serie name to update | The name of the appended data series you want to update. | Text |
Updated data series | The data of the appended data series you want to update. | Number |
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Remove All Appended Data Series - This action is used to remove all appended data series from the chart.
Remove Appended Data Series - This action is used to remove an appended data series from the chart.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to remove. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover | (number) Returns the series name of the selected value when the chart has hovered. | Text |
Radar Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text |
Series 1 data | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Series 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 3 name | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Series 3 data | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Serie 4 data | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Color |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Series 1 - Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 3 - Gradient to color | The 2nd gradient color for the 3rd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 4 - Gradient to color | The 2nd gradient color for the 4th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Polygon color 1 | The first color polygon space between lines. | Color |
Polygon color 2 | The second color polygon space between lines. | Color |
Polygon stroke color | The color for the lines of the background polygon. | Color |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Chart 1 - Marker color | The color for the 1st serie markers. | Color |
Chart 2 - Marker color | The color for the 2nd serie markers. | Color |
Chart 3 - Marker color | The color for the 3rd serie markers. | Color |
Chart 4 - marker color | The color for the 4th serie markers. | Color |
Marker color opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Chart 1 - Marker stroke color | The color for the 1st serie markers stroke. | Color |
Chart 2 - Marker stroke color | The color for the 2nd serie markers stroke. | Color |
Chart 3 - Marker stroke color | The color for the 3rd serie markers stroke. | Color |
Chart 4 - Marker stroke color | The color for the 4th serie markers stroke. | Color |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show x-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Show y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, right, left, bottom | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Color |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Append data series - This action is used to add new series.
Fields
Title | Description | Type |
Serie name | (text) Name for the added serie. | Text |
Serie data | (list of numbers) These values represent Y-axis data for the added serie. | Number |
Serie color | The color for the added serie. | Color |
Gradient to color | The 2nd gradient color for the added serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element. | Color |
Marker color | The color for the added serie markers. | Color |
Marker stroke color | The color for the added serie markers stroke. | Color |
Element Events
Title | Description |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Heatmap Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Data type | Select the data type you want to use for this heatmap. | App Type |
Your data | For example, ‘do a search for dataType’. NOTE: this dataType must be the same dataType as specified above. | Item reperesenting Data type |
X-axis label data | Data for on the X-axis labels. Must be a text. | Filed of Data type, represent Text, image or file |
Y-axis label data | Data for on the Y-axis labels. Must be a text. | Filed of Data type, represent Text, image or file |
Optional values | This is only used if you want to sum or use the average of a number field. This will replace the native count. Leave empty if you don’t need it. | Filed of Data type, represent Number (optional) |
Calculate value | Choose how to calculate the optional values. Only applies if you have chosen an option value. Available options: sum, avg | Dropdown |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Chart color | The color for the serie. | Text |
Show stroke | Enables displaying of the stroke of cells. | Checkbox (yes/no) |
Stroke color | The color for stroke. | Color |
Stroke width | (number) The stroke width of the cell. Available options: 0, 1, 2, 3, 4, 5 | Dropdown |
Radius | The border radius of cells. | Number |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show x-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
Show x-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border color | The color of the X-axis border. | Color |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
Show x-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks color | The color for the X-axis ticks. | Color |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
Show y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Y-axis ticks height | (number) The size for the Y-axis ticks. | Number |
Label prefix | Will be displayed on the tooltip. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Label suffix | Will be displayed on the tooltip. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Data label color | Font color for all data labels. | Color |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Reverse negative shade | This option allows reversing the shades for negatives but keeps the positive shades as it is now. | Checkbox (yes/no) |
Enable color range | Enables the cells color based on the values. | Checkbox (yes/no) |
Color range 1 | The color for the first range of values. | Color |
From value 1 | The start value of the first range. | Number |
To value 1 | The end value of the first range. | Number |
Color range 2 | The color for the second range of values. | Color |
From value 2 | The start value of the second range. | Number |
To value 2 | The end value of the second range. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected x-axis label | (text) Returns the selected X-axis label when the chart has clicked. | Text |
Selected y-axis label | (text) Returns the selected Y-axis label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected x-axis label on hover | (text) Returns the last of the selected X-axis label when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
Last selected y-axis label on hover | (text) Returns the last of the selected Y-axis label when the chart has hovered. | Text |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Candlestick Chart
Element Fields
Title | Description | Type |
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 (yes/no) |
Time series (UNIX) | Accepts list of UNIX timestamps (numbers). You can extract the UNIX timestamp from a list of dates using the ‘:extract’ operator in Bubble. You can format the UNIX data below. | Number |
Open series | (list of numbers) These values represent the open Y-axis data for the series. | Number |
High series | (list of numbers) These values represent the high Y-axis data for the series. | Number |
Low series | (list of numbers) These values represent the low Y-axis data for the series. | Number |
Close series | (list of numbers) These values represent the close Y-axis data for the series. | Number |
Locale | The date will be formatted based on the locale. Examples of locales are: en (english, USA), fr (french), nl (dutch), en-ca (english, canada) etc. | Text (optional) |
UNIX Date formatter | Some examples (note: date formatting differs between locales): MMMM D YYYY h:mm:ss a results in April 28th 2020, 7:51:27 pm. LLLL = Tuesday, April 28, 2020 7:52 PM. L = 04/28/2020. LTS = 7:54:50 PM. Available options: MMMM D YYYY h:mm:ss a, MMMM D YYYY, MMMM D, D, h:mm:ss a, h:mm a, llll, LLLL, lll, LLL, ll, LL, l, L, LTS, LT | Dropdown |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Wick color | This option allows coloring the wick with the same color as the bar. | Color |
Wick width | (number) The stroke width of the candlestick. | Number (optional) |
Wick dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the chart. Available options: solid, gradient | Dropdown |
Chart color upward | The color for upward values of the candlestick series. | Text |
Chart color downward | The color for downward values of the candlestick series. | Color |
Use fill color for wick | This option allows coloring the wick with the same color as the bar. | Checkbox (yes/no) |
Gradient to color | The 2nd gradient color for the candlestick series. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show x-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show x-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show x-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
X-axis min value | Timestamp in UNIX. Force the X-axis to start from a specific amount (number, UNIX timestamp). The graph drawing beyond this number will be clipped off. | Number (optional) |
X-axis max value | Timestamp in UNIX. Force the X-axis to stop at a specific amount (number, UNIX timestamp). The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
X-axis data seperation | If ‘category’ all values will show on the X-axis, while ‘datetime’ only shows a couple values (this is great if you have a chart with a lot of values). Available options: category, datetime, numeric | Dropdown |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Data point is clicked | This event is triggered when the chart is clicked. |
Element States
Title | Description | Type |
Selected timestamp (date) | Returns the timestamp that gets clicked (date). | Date |
Selected open value | Returns the open value that gets clicked (number). | Number |
Selected high value | Returns the high value that gets clicked (number). | Number |
Selected low value | Returns the low value that gets clicked (number). | Number |
Selected close value | Returns the close value that gets clicked (number). | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected timestamp (date) on hover | Returns the timestamp that gets hovered (date). | Date |
Last selected open value on hover | Returns the open value that gets hovered (number). | Number |
Last selected high value on hover | Returns the high value that gets hovered (number). | Number |
Last selected low value on hover | Returns the low value that gets hovered (number). | Number |
Last selected close value on hover | Returns the close value that gets hovered (number). | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Mixed Chart (Area + Bar)
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Series 1 name (area) | The name of the 1st serie. Will be shown in the tooltip. | Text |
Series 1 data (area) | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Series 2 name (area) | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data (area) | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 3 name (bar) | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Series 3 data (bar) | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 4 name (bar) | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Series 4 data (bar) | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ':formatted as' operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line's width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Text |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is 'solid'. | Number |
Series 1 - Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Marker shape | The shape of markers. Available options: circle, square | Dropdown |
Marker radius | (number) The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown. | Number |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number (optional) |
Series 1 - Marker color | The color for the 1st serie markers. | Text |
Series 2 - Marker color | The color for the 2nd serie markers. | Text |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Series 1 - Marker stroke color | The color for the 1st serie markers stroke. | Text |
Series 2 - Marker stroke color | The color for the 2nd serie markers stroke. | Text |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Stack charts | Stack the graphs on top of each other. | Checkbox (yes/no) |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “...” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
2nd Y-axis title | (optional) (text) The title for the 2nd Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Column width | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Convert area to line | Converts area series into line series. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Animation delay | (number) This value represents the waiting time in milliseconds before animation. | Number |
Syncing ID | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Enable events | Markers will require an intersect with the mouse pointer on hover. | Checkbox (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn't being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all "null" or "undefined" values from provided data. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
2nd Y-axis series name | (optional) (text) The series name to assign for the second Y-axis. Please provide one of the series names that was assigned for one of the series. | Text (optional) |
2nd Y-axis prefix | (optional) (text) Prefix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis suffix | (optional) (text) Suffix for the 2nd Y-axis label. | Text (optional) |
Element Actions
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to show. | Text |
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Serie type | The type of chart for the new series. Available options: area, bar, line | Dropdown |
Serie name | Name of the new data series. | Text |
Chart data series | Y-axis data for the new chart (list of numbers). | Number |
Chart color | The color for the new serie. | Color |
Chart gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Marker color | The color for the new serie markers. | Color |
Marker stroke color | The color for the new serie markers stroke. | Color |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all "null" or "undefined" values from provided data. | Checkbox (yes/no) |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Clear a Selection - This action is used to remove a selection from the chart.
Remove Appended Data Series - This action is used to remove an appended data series from the chart.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to remove. | Text |
Remove All Appended Data Series - This action is used to remove all appended data series from the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover (must have events enabled or custom tooltips) | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the "Generate PNG URL" action. | Text |
Last selected index on hover (must have events enabled or custom tooltips) | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover (must have events enabled or custom tooltips) | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Selection Start Index | (number) Returns the start index of the X-axis label when the part of chart has selected. | Number |
Selection End Index | (number) Returns the stop index of the X-axis label when the part of chart has selected. | Number |
Data series 1 | (list of numbers) Returns the 1st series data. | Number |
Data series 2 | (list of numbers) Returns the 2nd series data. | Number |
Data series 3 | (list of numbers) Returns the 3rd series data. | Number |
Data series 4 | (list of numbers) Returns the 4th series data. | Number |
Simple List Calculations
Element Fields
Title | Description | Type |
Data source | The first list for mathematical calculations. | Number |
Calculation type | This dropdown defines all allowed operations. Available options: Multiplication, Division, Addition, Subtraction | Dropdown |
Calculation amount | The number for calculations between 'Data source's values. | Number (optional) |
Calculation from list | The second list is for mathematical calculations. | Number (optional) |
Calculation type | This dropdown defines all allowed operations. Available options: Multiplication, Division, Addition, Subtraction | Text |
Calculation amount | The number for calculations between 'Data source's values. | Number (optional) |
Calculation from list | The second list is for mathematical calculations. | Number (optional) |
Calculation type | This dropdown defines all allowed operations. Available options: Multiplication, Division, Addition, Subtraction | Dropdown |
Calculation amount | The number for calculations between 'Data source's values. | Number (optional) |
Calculation from list | The second list is for mathematical calculations. | Number (optional) |
Calculation type | This dropdown defines all allowed operations. Available options: Multiplication, Division, Addition, Subtraction | Dropdown |
Calculation amount | The number for calculations between 'Data source's values. | Number (optional) |
Calculation from list | The second list is for mathematical calculations. | Number (optional) |
Calculation type | This dropdown defines all allowed operations. Available options: Multiplication, Division, Addition, Subtraction | Dropdown |
Calculation amount | The number for calculations between 'Data source's values. | Number (optional) |
Calculation from list | The second list is for mathematical calculations. | Number (optional) |
Interval | The amount of interval. | Number |
Interval text suffix | The suffix for created interval. | Text (optional) |
Min value | The min value of interval. | Number (optional) |
Element States
Title | Description | Type |
Result | (list of numbers) Returns the result of calculations. | Number |
Grouped data (count) | (list of numbers) Returns the result of calculations as counted group. | Number |
Grouped interval (text) | (list of texts) Returns the result of calculations as counted group. | Text |
Grouped data (sum) | (list of numbers) Returns the result of calculations as summed group. | Number |
Scatter Chart
Element Fields
Title | Description | Type |
Your data series need both a Y-axis and X-axis value. | ||
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text |
Y-axis data serie 1 | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data serie 1 | X-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Serie 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 2 | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 2 | X-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Serie 3 name | The name of the 3rd serie. Will be shown in the tooltip. Available options: light, dark | Text (optional) |
Y-axis data serie 3 | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 3 | X-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Serie 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 4 | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 4 | X-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Serie 5 name | The name of the 5th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 5 | Y-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 5 | X-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Decimal amount X | The amount of decimals on the X-axis. | Number |
Decimal amount Y | The amount of decimals on the Y-axis. | Number (optional) |
—————————- Style options —————————- | ||
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
————————— Marker options ————————– | ||
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number |
Marker color 1 | The color for the 1st serie markers. | Text |
Marker color 2 | The color for the 2nd serie markers. | Color |
Marker color 3 | The color for the 3rd serie markers. | Color |
Marker color 4 | The color for the 4th serie markers. | Color |
Marker color 5 | The color for the 5th serie markers. | Color |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Marker stroke color 1 | The color for the 1st serie markers stroke. | Text |
Marker stroke color 2 | The color for the 2nd serie markers stroke. | Color |
Marker stroke color 3 | The color for the 3rd serie markers stroke. | Color |
Marker stroke color 4 | The color for the 4th serie markers stroke. | Color |
Marker stroke color 5 | The color for the 5th serie markers stroke. | Color |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
————————— Toolbar options ————————– | ||
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
—————————- Grid options —————————– | ||
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
—————————- Axis options —————————– | ||
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, right, bottom, left | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Color |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. | Text (optional) |
X-axis prefix | (optional) (text) Prefix for the X-axis label. | Text (optional) |
X-axis suffix | (optional) (text) Suffix for the X-axis label. | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
X-axis min value | Force the X-axis to start from a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
X-axis max value | Force the X-axis to stop at a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
——————————- Axis titles ——————————- | ||
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
————————— 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 (yes/no) |
Data label source 1 | List of text. Every value from this list will be displayed on the associated data point of series 1 in the chart. | Text (optional) |
Data label source 2 | List of text. Every value from this list will be displayed on the associated data point of series 2 in the chart. | Text (optional) |
Data label source 3 | List of text. Every value from this list will be displayed on the associated data point of series 3 in the chart. | Text (optional) |
Data label source 4 | List of text. Every value from this list will be displayed on the associated data point of series 4 in the chart. | Text (optional) |
Data label source 5 | List of text. Every value from this list will be displayed on the associated data point of series 5 in the chart. | Text (optional) |
Data label Y offset | Offset for all data labels. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
⚠️ 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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Serie name | Name of the new data series. | Text |
Y-axis data | Y-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data | X-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Data label source | List of text. Every value from this list will be displayed on the associated data point in the chart. | Text (optional) |
Marker color | The color for the new serie markers. | Color |
Marker stroke color | The color for the new serie markers stroke. | Color |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Serie name | This is the name of the data series you want to show. | Text |
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Serie name | This is the name of the data series you want to hide. | Text |
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (number) Returns the selected label when the chart has clicked. | Number |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover | (number) Returns the series name of the selected value when the chart has hovered. | Text |
Pyramid Chart
Element Fields
Title | Description | Type |
Horizontal chart? | This option allows for creating a horizontal bar chart. NOTE: doesn't support crosshairs! | Text (optional) |
Show data labels | Shows data labels on the place of markers. Make sure to turn the makers of if you enable this option. | Checkbox (yes/no) |
Position datalabels | The position of the label on the bar. Available options: 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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text |
Series 1 data | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Series 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ':formatted as' operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Stroke width | (number) The stroke width of the bar. | Number (optional) |
Dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the bars. Available options: solid, gradient | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Text |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is 'solid'. | Number |
Series 1- Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme.The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Crosshair background color | The color for the crosshair background line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Column width | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. NOTE: for horizontal bar. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Hide data labels for 0 / empty values | This option allows the dige of all 0 or "empty" data labels. | Checkbox (yes/no) |
Data label font color | Font color for all data labels. | Color |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn't being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Data serie name | This is the name of the data series you want to show. | Text |
Append Data series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Serie name | Name of the new data series. | Text |
Serie data | Y-axis data for the new chart (list of numbers). | Number |
Serie position | The serie position related to the chart. Available options: Left, Right | Dropdown |
Chart color | The color for the new serie. | Color |
Chart gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the "Generate PNG URL" action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Polar Area Chart
Element Fields
Title | Description | Type |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
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 (yes/no) |
Series data | Chart data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series data” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series label | Label data (text that will be displayed in the legend). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series label (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series label” field. | Text (optional) |
Stroke color | The color for stroke. | Color |
Stroke width | (number) The stroke width of the cell. | Number (optional) |
Chart color 2 | The color for the 2nd cell. | Color |
Chart color 1 | The color for the 1st cell. | Text |
Chart color 3 | The color for the 3rd cell. | Color |
Chart color 4 | The color for the 4th cell. | Color |
Chart color 5 | The color for the 5th cell. | Color |
Color list | A list of colors separated by a comma to replace the colors from the color inputs above. | Text (optional) |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, down, left, right | Dropdown |
Legend text Y offset | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Data label prefix | Will be displayed on the tooltip. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Data label suffix | Will be displayed on the tooltip. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Show y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Y-axis font size | The font size for Y-axis labels. | Number |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Display value instead of percentage on data label | Displays the value instead of the percentage on the data label. | Checkbox (yes/no) |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Start angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
End angle | Value between 0 and 360 (can be negative). Make sure the difference between your start angle and end angle is 360 (degrees) if you want a circulair chart. | Number (optional) |
BG rings stroke color | Background rings stroke color. | Color |
BG rings stroke width | Background rings stroke width. | Number |
Enable monochrome mode | This will use the specified monochrome color and change the shade to a lighter one for every data point. | Checkbox (yes/no) |
Monochrome color | The color that will be used as monochrome color. | Color |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected value hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (ignores monochrome mode) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Treemap Chart
Element Fields
Title | Description | Type |
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text |
Y-axis data serie 1 | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data serie 1 | X-axis data for serie 1 (list of texts). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Serie 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 2 | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 2 | X-axis data for serie 2 (list of texts). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Serie 3 name | The name of the 3rd serie. Will be shown in the tooltip. Available options: light, dark | Text (optional) |
Y-axis data serie 3 | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 3 | X-axis data for serie 3 (list of texts). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Serie 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 4 | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 4 | X-axis data for serie 4 (list of texts). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Serie 5 name | The name of the 5th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 5 | Y-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 5 | X-axis data for serie 5 (list of texts). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | If you want tThe color for the 2nd serie.o use dynamic colors, make sure to use RGBA colors instead of HEX colors. | Color |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Series 5 color | The color for the 5th serie. | Color |
Distributed Color List (Optional) | Comma separated HEX (e.g.: #CCCCCC,#EBEBEB) color list. Every color in this list will be used for one data point. When this input is not empty we will use these colors instead of the other colors specified. | Text (optional) |
Stroke color | The color for stroke. | Text |
Stroke width | (number) The stroke width of the cell. | Number |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show serie name on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, right, bottom, left | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Color |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. | Text (optional) |
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 (yes/no) |
Border radius | The border radius of cells. | Number |
Reverse negative shades | This option allows reversing the shades for negatives but keeps the positive shades as it is now. | Checkbox (yes/no) |
Show data labels | Shows data labels on the place of markers. Make sure to turn the makers of if you enable this option. | Checkbox (yes/no) |
Display value on data label | Displays the series value belong to series label. | Checkbox (yes/no) |
Data label font size | Font size for all data labels. | Number |
Data label font weight | Font weight for all data labels. Available options: 100, 200, 300, 400, 500, 600, 700, 800, 900 | Dropdown |
Data label Y offset | Offset for all data labels. | Number |
Data label color | Font color for all data labels. | Color |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Enable color range | Enables the cells color based on the values. | Checkbox (yes/no) |
Color range 1 | The color for the first range of values. | Color |
From value 1 | The start value of the first range. | Number |
To value 1 | The end value of the first range. | Number |
Color range 2 | The color for the second range of values. | Color |
From value 2 | The start value of the second range. | Number |
To value 2 | The end value of the second range. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Serie name | Name of the new data series. | Text |
Y-axis data | Y-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data | X-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Serie color | The color for the new serie. | Color |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected series name hover (for custom tooltip) | (number) Returns the series name of the selected value when the chart has hovered. | Text |
Last selected x-axis data hover (for custom tooltip) | (text) Returns the last of the selected X-axis label when the chart has hovered. | Text |
Last selected y-axis data hover (for custom tooltip) | (text) Returns the last of the selected Y-axis label when the chart has hovered. | Number |
Clicked index | (number) Returns the index of data value when the chart is clicked. | Number |
Clicked series name | (text) Returns the series name when the chart is clicked. | Text |
Clicked X-axis value | (text) Returns the X-axis label when the chart is clicked. | Text |
Clicked Y-axis value | (number) Returns the Y-axis label when the chart is clicked. | Number |
Element Events
Title | Description |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Data point is clicked | This event is triggered when the chart is clicked. |
Funnel Chart (1 Dimension)
Element Fields
Title | Description | Type |
Labels | This is the title for the steps in your funnel, add your data labels here separated by a comma (e.g. Website visits,Sign-ups,Confirmed email,Customers). | Text |
Values | Add numerical values separated by comma (e.g 1000,700,300,100). | Text |
Funnel direction | The orientation for the chart. Available options: vertical, horizontal | Dropdown |
Gradient colors | Colors for your funnel in hex formate separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Step line color | The color for the separation lines. | Color |
Value font Color | The color for provided values is displayed on the chart. | Color |
Value font weight | The weight for provided values is displayed on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Dropdown |
Value font size | The size for provided values is displayed on the chart. Available options: 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28 | Dropdown |
Label font color | The color for provided labels is displayed on the chart. | Color |
Label font weight | The weight for provided labels is displayed on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Text |
Label font size | The size for provided labels is displayed on the chart. Available options: 12, 13, 14, 15, 16, 17, 18 | Dropdown |
Show Percentage | This option allows to representation of provided values in percentages on the chart. | Checkbox (yes/no) |
Percentage font Color | The color for percentages on the chart. | Color |
Percentage font weight | The weight for percentages on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Dropdown |
Percentage font size | The size for percentages on the chart. Available options: 12, 13, 14, 15, 16, 17, 18, 19, 20 | Dropdown |
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Funnel Chart (2 Dimensions)
Element Fields
Title | Description | Type |
Main labels | This is the title for the steps in your funnel, add your data labels here separated by a comma (e.g. Website visits,Sign-ups,Confirmed email,Customers). | Text |
Value name 1 | The title of the sublabel. | Text |
Values 1 | Add numerical values separated by comma (e.g 1000,700,300,100). | Text |
Values 1 gradient colors | Colors for your funnel in hex format separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Value name 2 | The title of the sublabel. | Text (optional) |
Values 2 | Add numerical values separated by comma (e.g 1000,700,300,100). | Text (optional) |
Values 2 gradient colors | Colors for your funnel in hex format separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Value name 3 | The title of the sublabel. | Text (optional) |
Values 3 | Add numerical values separated by comma (e.g 1000,700,300,100). | Text (optional) |
Values 3 gradient colors | Colors for your funnel in hex format separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Value name 4 | The title of the sublabel. | Text (optional) |
Values 4 | Add numerical values separated by comma (e.g 1000,700,300,100). | Text (optional) |
Values 4 gradient colors | Colors for your funnel in hex format separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Value name 5 | The title of the sublabel. | Text (optional) |
Values 5 | Add numerical values separated by comma (e.g 1000,700,300,100). | Text (optional) |
Values 5 gradient colors | Colors for your funnel in hex format separated by comma (e.g #0083FF,#52AAFB,#80C1FE). | Text |
Funnel direction | The orientation for the chart. Available options: vertical, horizontal | Dropdown |
Step line color | The color for the separation lines. | Color |
Value font Color | The color for provided values is displayed on the chart. | Color |
Value font weight | The weight for provided values is displayed on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Dropdown |
Value font size | (number) The size for provided values is displayed on the chart. Available options: 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28 | Dropdown |
Label font color | The color for provided labels is displayed on the chart. | Color |
Label font weight | The weight for provided labels is displayed on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Text |
Label font size | The size for provided labels is displayed on the chart. Available options: 12, 13, 14, 15, 16, 17, 18 | Dropdown |
Show Percentage | This option allows to representation of provided values in percentages on the chart. | Checkbox (yes/no) |
Percentage font Color | The color for percentages on the chart. | Color |
Percentage font weight | The weight for percentages on the chart. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Dropdown |
Percentage font size | The size for percentages on the chart. Available options: 12, 13, 14, 15, 16, 17, 18, 19, 20 | Dropdown |
Tooltip background color | The color for the tooltip background. | Color |
Tooltip percentage color | The color for sub-labels. | Color |
Tooltip title color | The color for the tooltip title. | Color |
Legend font color | The font color for the legend text. | Color |
Legend font size | The size for the legend text. | Number |
Legend font weight | The weight for the legend text. Available options: 100, 200, 300, 400, 500, 600, 700, 800 | Dropdown |
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Bubble Chart
Element Fields
Title | Description | Type |
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text |
Y-axis data serie 1 | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data serie 1 | X-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Radius data serie 1 | Z-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number |
Serie 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 2 | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 2 | X-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Radius data serie 2 | Z-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number (optional) |
Serie 3 name | The name of the 3rd serie. Will be shown in the tooltip. Available options: light, dark | Text (optional) |
Y-axis data serie 3 | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 3 | X-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Radius data serie 3 | Z-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number (optional) |
Serie 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 4 | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 4 | X-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Radius data serie 4 | Z-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number (optional) |
Serie 5 name | The name of the 5th serie. Will be shown in the tooltip. | Text (optional) |
Y-axis data serie 5 | Y-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
X-axis data serie 5 | X-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Radius data serie 5 | Z-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number (optional) |
Decimal amount X | The amount of decimals on the X-axis. | Number |
Decimal amount Y | The amount of decimals on the Y-axis. | Number (optional) |
Decimal amount Z | The amount of decimals on the Z-axis. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Minimum marker size | The minimum size for the bubble. If provided radius data is smaller, the size will be forced to this value. | Number |
Maximum marker size | The maximum size for the bubble. If provided radius data is greater, the size will be forced to this value. | Number |
Marker color 1 | The color for the 1st serie markers. | Text |
Marker color 2 | The color for the 2nd serie markers. | Color |
Marker color 3 | The color for the 3rd serie markers. | Color |
Marker color 4 | The color for the 4th serie markers. | Color |
Marker color 5 | The color for the 5th serie markers. | Color |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Marker stroke color 1 | The color for the 1st serie markers stroke. | Text |
Marker stroke color 2 | The color for the 2nd serie markers stroke. | Color |
Marker stroke color 3 | The color for the 3rd serie markers stroke. | Color |
Marker stroke color 4 | The color for the 4th serie markers stroke. | Color |
Marker stroke color 5 | The color for the 5th serie markers stroke. | Color |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, right, bottom, left | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Color |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. | Text (optional) |
X-axis prefix | (optional) (text) Prefix for the X-axis label. | Text (optional) |
X-axis suffix | (optional) (text) Suffix for the X-axis label. | Text (optional) |
Z-axis prefix | (optional) (text) Prefix for the Z-axis label. | Text (optional) |
Z-axis suffix | (optional) (text) Suffix for the Z-axis label. | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
X-axis min value | Force the X-axis to start from a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
X-axis max value | Force the X-axis to stop at a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Data label source 1 | List of text. Every value from this list will be displayed on the associated data point of series 1 in the chart. | Text (optional) |
Data label source 2 | List of text. Every value from this list will be displayed on the associated data point of series 2 in the chart. | Text (optional) |
Data label source 3 | List of text. Every value from this list will be displayed on the associated data point of series 3 in the chart. | Text (optional) |
Data label source 4 | List of text. Every value from this list will be displayed on the associated data point of series 4 in the chart. | Text (optional) |
Data label source 5 | List of text. Every value from this list will be displayed on the associated data point of series 5 in the chart. | Text (optional) |
Data label Y offset | Offset for all data labels. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Z-axis tooltip title | (text) The customizable text for bubble size data. | Text |
Element Actions
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Re-render - This action is used to redraw the chart.
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Serie name | Name of the new data series. | Text |
Y-axis data | Y-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
X-axis data | X-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Radius data (Z-axis) | Z-axis data for new serie (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis and Z-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis and Z-axis. | Number |
Data label source | List of text. Every value from this list will be displayed on the associated data point in the chart. | Text (optional) |
Marker color | The color for the new serie markers. | Color |
Marker stroke color | The color for the new serie markers stroke. | Color |
Show Data Series - This will allow you to show a hidden series programmatically.
Fields
Title | Description | Type |
Serie name | This is the name of the data series you want to show. | Text |
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Serie name | This is the name of the data series you want to hide. | Text |
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Number |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Last selected series radius on hover | (number) Returns the radius of the selected value when the chart has hovered. | Number |
Selected radius value | (number) Returns the radius of the selected value when the chart has clicked. | Number |
Last selected data label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Selected data label | (text) Returns the selected label when the chart has clicked. | Text |
Range Area Chart
Element 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 (yes/no) |
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 (yes/no) |
Series name | The name of the data. Will be shown in the tooltip. | Text |
Lower limit data | Y-axis data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Upper limit data | Y-axis data (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Line fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Chart color | The color for the serie. | Text |
Area color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Trim X-axis labels | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Forecast data points | (number) The number of ending data points you want to indicate as forecast or prediction values. | Number |
Forecast fill opacity | (numbner) The opacity for forecast connection points line of series. | Number |
Forecast dash array | (number) If the value is more than 0 the forecast connection points line will be dashed. | Number |
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 (yes/no) |
Show median series | Enables the median line on the chart based on the upper and lower limits. | Checkbox (yes/no) |
Median series title | The title of median line. | Text |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Syncing ID (number) | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected lower value on hover | (number) Returns the last lower value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected upper value on hover | (number) Returns the last upper value when the chart has hovered. | Number |
Last selected median value on hover | (number) Returns the last median value when the chart has hovered. | Number |
Box & Whisker Chart (Vertical)
Element Fields
Title | Description | Type |
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 (yes/no) |
X-axis series | (list of texts) Values represent the X-axis data for all series. | Text |
Minimum series | (list of numbers) These values represent the minimum Y-axis data for the boxplot series. | Number |
Q1 series | (list of numbers) These values represent the Q1 Y-axis data for the boxplot series. | Number |
Median series | (list of numbers) These values represent the median Y-axis data for the boxplot series. | Number |
Q3 series | (list of numbers) These values represent the Q3 Y-axis data for the boxplot series. | Number |
Maximum series | (list of numbers) These values represent the maximum Y-axis data for boxplot series. | Number |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Wick color | This option allows coloring the wick with the same color as the bar. | Color |
Wick width | (number) The stroke width of the candlestick. | Number (optional) |
Wick dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the bars. Available options: solid, gradient | Dropdown |
Chart color upward | The color for upward values of the candlestick series. | Text |
Chart color downward | The color for downward values of the candlestick series. | Color |
Gradient to color | The 2nd gradient color for the candlestick series. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair color | The color for the crosshair line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
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 (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn't being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected X-axis | (text) Returns the selected X-axis label when the chart has clicked. | Text |
Selected minimum value | (number) Returns the minimum value of clicked boxplot item. | Number |
Selected Q1 value | (number) Returns the Q1 value of clicked boxplot item. | Number |
Selected median value | (number) Returns the median value of clicked boxplot item. | Number |
Selected Q3 value | (number) Returns the Q3 value of clicked boxplot item. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected X-axis on hover | (text) Returns the last of the selected X-axis label when the chart has hovered. | Text |
Last selected minimum value on hover | (number) Returns the minimum value of hovered boxplot item. | Number |
Last selected Q1 value on hover | (number) Returns the Q1 value of hovered boxplot item. | Number |
Last selected median value on hover | (number) Returns the median value of hovered boxplot item. | Number |
Last selected Q3 value on hover | (number) Returns the Q3 value of hovered boxplot item. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the "Generate PNG URL" action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected maximum value on hover | (number) Returns the maximum value of hovered boxplot item. | Number |
Selected max value | (number) Returns the maximum value of clicked boxplot item. | Number |
Waterfall Chart
Element Fields
Title | Description | Type |
Horizontal chart? | This option allows for creating a horizontal bar chart. NOTE: doesn’t support crosshairs! | Checkbox (yes/no) |
Show data labels | Show or hide data labels on the chart. | Checkbox (yes/no) |
Position datalabels | The position of the label on the bar. Available options: 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 (yes/no) |
Series name | The name of the data. Will be shown in the tooltip. | Text (optional) |
Categories (no duplicate names) | Name of the categories separated by a comma. No duplicate names. | Text |
Series data (Use {{sum}} to sum previous values) | Y-axis data (list of numbers) separated by a comma. Use {{sum}} to display the sum of the previous values. Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text |
Start at 0 after sum | The following bar after {{sum}} parameter will have value 0. | Checkbox (yes/no) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Stroke width | (number) The stroke width of the bar. | Number (optional) |
Dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the bars. Available options: solid, gradient | Dropdown |
Chart color | The color for the serie. | Text |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Chart - Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Color negative values differently | Color negative values differently. | Checkbox (yes/no) |
Negative - Chart color | Color for the bars representing a negative value. | Color |
Negative - Gradient to color | The 2nd gradient color for the serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Color list | Supply a comma separated list of (hex) colors to give each individual bar a different color. For example: #00A2FF, #666666, #CCCCCC. | Text (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Crosshair background color | The color for the crosshair background line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Column width | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. NOTE: for horizontal bar. | Number |
Border radius | Sets rounded corners around the bars/columns. Do not use values above 10. | Number |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Data label font size | Font size for all data labels. | Number |
Data label font color | Font color for all data labels. | Color |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Sankey Chart
Element Fields
Title | Description | Type |
Data type | The data type with “name”, “target” and “value” characteristics. | App Type |
Data source | (list of objects) List of objects that contain all necessary information. The type of objects should be the same as selected in the “Data type” field. | Item reperesenting Data type |
Name | Objects field that represents the name. | Filed of Data type, represent Text, image or file |
Target | Objects field that represents the target. | Filed of Data type, represent Text, image or file |
Value (optional) | Objects field that represents the value. ℹ️ If you do not supply a value, the plugin will group your data by ‘Target’ and ‘Name’ and calculate the count automatically. | Filed of Data type, represent Number (optional) |
Decimal amount | (number) The number of digits of the decimal part. | Number |
Draggable | This option allows adding chart node interaction. | Checkbox (yes/no) |
Show decal pattern | This option allows setting style for the decal pattern. | Checkbox (yes/no) |
Line color | The color for the path that links the nodes. | Color |
Line opacity | (number) The opacity for the path that links the nodes. Accepted values from 0 to 1. | Number |
Orientation | The orientation for the chart. Available options: horizontal, vertical | Dropdown |
Color 1 | The 1st color of the chart. | Color |
Color 2 | The 2nd color of the chart. | Color |
Color 3 | The 3rd color of the chart. | Color |
Color 4 | The 4th color of the chart. | Color |
Color 5 | The 5th color of the chart. | Color |
Color 6 | The 6th color of the chart. | Color |
Color 7 | The 7th color of the chart. | Color |
Color 8 | The 8th color of the chart. | Color |
Color 9 | The 9th color of the chart. | Color |
Dynamic color list (separated by comma) | (optional) List of color codes separated by a comma. | Text (optional) |
Padding left (%) | (number) The padding from the left. | Number |
Padding right (%) | (number) The padding from the right. | Number |
Padding top (%) | (number) The padding from the top. | Number |
Padding bottom (%) | (number) The padding from the bottom. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. Charts points are not detectable without this feature, so some states will not get their values when it is disabled. | Checkbox (yes/no) |
Tooltip font color | The color for the tooltip text. | Color |
Tooltip font size | (number) The size for the tooltip text. | Number |
Tooltip BG color | The color for the tooltip background. | Color |
Tooltip padding | Tooltip padding separated by comma: up, right, down, left. | Text |
Show labels | This option allows displaying the slice label. | Checkbox (yes/no) |
Label position | The position of the label on the bar. Available options: top, left, right, bottom, inside, insideLeft, insideRight, insideTop, insideBottom, insideTopLeft, insideBottomLeft, insideTopRight, insideBottomRight | Dropdown |
Label font color | Font color for all data labels. | Color |
Label font size | Font size for all data labels. | Number |
Label font weight | Font weight for all data labels. Available options: 100, 200, 300, 400, 500, 600, 700, 800, 900 | Dropdown |
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 (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Disable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Value prefix | Prefix for the provided data. | Text (optional) |
Value suffix | Suffix for the provided data. | Text (optional) |
Element Actions
Re-render - This action is used to redraw the chart.
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
Element States
Title | Description | Type |
Clicked_source | (text) Returns the source node name when the chart is clicked. | Text |
Clicked value | (number) Returns the value when the chart is clicked. | Number |
Clicked target | (text) Returns the target node name when the chart is clicked. | Text |
Clicked name | (text) Returns the series name when the chart is clicked. | Text |
Is loaded | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Last selected source on hover | (text) Returns the source node name when the chart has hovered. | Text |
Last selected value on hover | (number) Returns the value when the chart has hovered. | Number |
Last selected target on hover | (text) Returns the target node name when the chart has hovered. | Text |
Last selected name on hover | (text) Returns the series name when the chart is hovered. | Text |
Box & Whisker Chart (Horizontal)
Element Fields
Title | Description | Type |
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 (yes/no) |
X-axis series | (list of texts) Values represent the X-axis data for all series. | Text |
Minimum series | (list of numbers) These values represent the minimum Y-axis data for the boxplot series. | Number |
Q1 series | (list of numbers) These values represent the Q1 Y-axis data for the boxplot series. | Number |
Median series | (list of numbers) These values represent the median Y-axis data for the boxplot series. | Number |
Q3 series | (list of numbers) These values represent the Q3 Y-axis data for the boxplot series. | Number |
Maximum series | (list of numbers) These values represent the maximum Y-axis data for boxplot series. | Number |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Wick color | This option allows coloring the wick with the same color as the bar. | Color |
Wick width | (number) The stroke width of the candlestick. | Number (optional) |
Wick dash width | (number) If the value is more than 0 the stroke will be dashed. | Number (optional) |
Color style | This option defines how to color the chart. Available options: solid, gradient | Dropdown |
Chart color upward | The color for upward values of the candlestick series. | Text |
Chart color downward | The color for downward values of the candlestick series. | Color |
Gradient to color | The 2nd gradient color for the candlestick series. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair color | The color for the crosshair line. | Color |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
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 (yes/no) |
Bar height | (number) The size of the bar in percentages relates to two adjacent grid lines. Accepted value from 0 to 100. | Number |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
Element Actions
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected X-axis | (text) Returns the selected X-axis label when the chart has clicked. | Text |
Selected minimum value | (number) Returns the minimum value of clicked boxplot item. | Number |
Selected Q1 value | (number) Returns the Q1 value of clicked boxplot item. | Number |
Selected median value | (number) Returns the median value of clicked boxplot item. | Number |
Selected Q3 value | (number) Returns the Q3 value of clicked boxplot item. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected X-axis on hover | (text) Returns the last of the selected X-axis label when the chart has hovered. | Text |
Last selected minimum value on hover | (number) Returns the minimum value of hovered boxplot item. | Number |
Last selected Q1 value on hover | (number) Returns the Q1 value of hovered boxplot item. | Number |
Last selected median value on hover | (number) Returns the median value of hovered boxplot item. | Number |
Last selected Q3 value on hover | (number) Returns the Q3 value of hovered boxplot item. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected maximum value on hover | (number) Returns the maximum value of hovered boxplot item. | Number |
Selected max value | (number) Returns the maximum value of clicked boxplot item. | Number |
World / Geo Map Chart
Element Fields
Title | Description | Type |
List of Countries/Regions | Comma separated Country / Region data (Texts). A country name as a text (for example, England), or an uppercase ISO-3166-1 alpha-2 code or its English text equivalent (for example, GB or United Kingdom). An uppercase ISO-3166-2 region code name or its English text equivalent (for example, US-NJ or New Jersey). A metropolitan area code. These are three-digit metro codes used to designate various regions; US codes only supported. Note that these are not the same as telephone area codes. | Text |
Series name | The name of the data series for on the tooltip. | Text (optional) |
List of Data | Comma separated Data (Numbers). Make this list has the same size as the List of Countries as they need to match up and vice versa. | Text |
Region | Countries outside of the region will not be colored. For example, when selecting ‘Americas’ countries in Europe will not be colored. Available options: World, United States, US Alabama, US Alaska, US Arizona, US Arkansas, US California, US Colorado, US Connecticut, US Delaware, US Florida, US Georgia, US Hawaii, US Idaho, US Illinois, US Indiana, US Iowa, US Kansas, US Kentucky, US Louisiana, US Maine, US Maryland, US Massachusetts, US Michigan, US Minnesota, US Mississippi, US Missouri, US Montana, US Nebraska, US Nevada, US New Hampshire, US New Jersey, US New Mexico, US New York, US North Carolina, US North Dakota, US Ohio, US Oklahoma, US Oregon, US Pennsylvania, US Rhode Island, US South Carolina, US South Dakota, US Tennessee, US Texas, US Utah, US Vermont, US Virginia, US Washington, US West Virginia, US Wisconsin, US Wyoming, Africa, Northern Africa, Western Africa, Middle Africa, Eastern Africa, Southern Africa, Europe, Northern Europe, Western Europe, Eastern Europe, Southern Europe, Americas, Northern America, Caribbean, Central America, South America, Asia, Central Asia, Eastern Asia, Southern Asia, South-Eastern Asia, Western Asia, Oceania, Australia and New Zealand, Melanesia, Micronesia, Polynesia | Dropdown |
Resolution | ‘countries’ - Supported for all regions, except for US state regions. ‘provinces’ - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported. ‘metros’ - Supported for the US country region and US state regions only. Available options: countries, provinces, metros | Dropdown |
(HEX) Colors Scale Range | A list of HEX colors used for the chart. | Text |
Default color | The default color for the countries. | Color |
Country border color | The color for the country border. | Color |
Min value (optional) | If present, specifies a minimum value for chart color data. Color data values of this value and lower will be rendered as the first color in the Colors range. | Number (optional) |
Max value (optional) | If present, specifies a maximum value for chart color data. Color data values of this value and higher will be rendered as the last color in the Colors range. | Number (optional) |
Values Scale (optional) | Comma separated numbers. Needs to be same length as Color Scale Range! If present, controls how values are associated with colors. Each value is associated with the corresponding color in the Colors array. These values apply to the chart color data. Coloring is done according to a gradient of the values specified here. Not specifying a value for this option is equivalent to specifying Min value and Max value. | Text (optional) |
Hide legend | Disables the chart legend. | Checkbox (yes/no) |
Legend text stroke color | The stroke color of legend labels. | Color |
Hide tooltip | Disables the tooltip chart. | Checkbox (yes/no) |
Background color | The background color of the tooltip chart. | Color |
Title background color | The background color of chart title. | Color |
Border color | The border color of tooltip chart. | Color |
Font color | The font color of tooltip chart. | Color |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number |
Prefix | Will be displayed on the tooltip. | Text (optional) |
Suffix | Will be displayed on the tooltip. | Text (optional) |
Do not refresh | The chart will not refresh automatically. This improves chart performance. You can manually update the chart by running the re-render workflow action. | Checkbox (yes/no) |
Element Actions
Re-Render - This action is used to redraw the chart.
Element Events
Title | Description |
Country with data is clicked | This event is triggered when a country from the chart is clicked. |
Element States
Title | Description | Type |
Is loaded | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Clicked index | (number) Returns the index of data value when the chart is clicked. | Number |
Clicked country value | (text) Returns the country name when the chart is clicked. | Text |
Clicked data value | (number) Returns the country value when the chart is clicked. | Number |
Line Chart (Multiple Series)
Element 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 (yes/no) |
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 (yes/no) |
Series 1 name | The name of the 1st serie. Will be shown in the tooltip. | Text (optional) |
Series 1 data | Y-axis data for serie 1 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 1 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 1 data” field. | Text (optional) |
Series 2 name | The name of the 2nd serie. Will be shown in the tooltip. | Text (optional) |
Series 2 data | Y-axis data for serie 2 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 2 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 2 data” field. | Text (optional) |
Series 3 name | The name of the 3rd serie. Will be shown in the tooltip. | Text (optional) |
Series 3 data | Y-axis data for serie 3 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 3 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 3 data” field. | Text (optional) |
Series 4 name | The name of the 4th serie. Will be shown in the tooltip. | Text (optional) |
Series 4 data | Y-axis data for serie 4 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 4 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 4 data” field. | Text (optional) |
Series 5 name | The name of the 5th serie. Will be shown in the tooltip. | Text (optional) |
Series 5 data | Y-axis data for serie 5 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 5 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 5 data” field. | Text (optional) |
Series 6 name | The name of the 6th serie. Will be shown in the tooltip. | Text (optional) |
Series 6 data | Y-axis data for serie 6 (list of numbers). Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Number (optional) |
Series 6 data (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series 6 data” field. | Text (optional) |
Decimal amount | (optional) The amount of decimals on the Y-axis. | Number (optional) |
Series category | X-axis data (list of texts). You can use the ‘:formatted as’ operator in Bubble to convert other datatypes to a text! Make sure to use the same amount of data points for the Y-axis as for the X-axis. If you are for example using a grouping for the Y-axis, make sure that you use the same grouping for the X-axis. | Text (optional) |
Series category (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Series category” field. | Text (optional) |
Stroke style | This option defines the style of the series points connection. Available options: straight, smooth, stepline | Dropdown |
Stroke width | (number) The connection line’s width of the series. | Number (optional) |
Dash width | (number) If the value is more than 0 the connection points line for the serie will be dashed. | Number (optional) |
Color style | This option defines how to color the connection points line. Available options: solid, gradient | Dropdown |
Series 1 color | The color for the 1st serie. | Text |
Series 2 color | The color for the 2nd serie. | Text |
Series 3 color | The color for the 3rd serie. | Color |
Series 4 color | The color for the 4th serie. | Color |
Series 5 color | The color for the 5th serie. | Color |
Series 6 color | The color for the 6th serie. | Color |
Fill color opacity | Fill color of the chart. Value between 0 and 1. Works when color style is ‘solid’. | Number |
Series 1 - Gradient to color | The 2nd gradient color for the 1st serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. Available options: light, dark | Text |
Series 2 - Gradient to color | The 2nd gradient color for the 2nd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Text |
Series 3 - Gradient to color | The 2nd gradient color for the 3rd serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 4 - Gradient to color | The 2nd gradient color for the 4th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 5 - Gradient to color | The 2nd gradient color for the 5th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Series 6 - Gradient to color | The 2nd gradient color for the 6th serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Gradient type | This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown. Available options: horizontal, vertical | Dropdown (optional) |
Gradient opacity to | (number) The opacity for the 2nd gradient color. | Number |
Gradient opacity from | (number) The opacity for the 1st gradient color. | Number |
Enable dropshadow | Draws a drop shadow for the serie. | Checkbox (yes/no) |
Dropshadow color | The color of the shadow. | Color (optional) |
Dropshadow blur | (number) The blur distance for shadow. Accepted values from 0 to 100. | Number (optional) |
Dropshadow vertical offset | (number) The top offset for shadow in px. | Number (optional) |
Dropshadow horizontal offset | (number) The left offset for shadow in px. | Number (optional) |
Dropshadow opacity | (number) The opacity for shadow. Accepted values from 0 to 1. | Number (optional) |
Marker shape | The shape of markers. Available options: circle, square | Dropdown |
Marker radius | (number) The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown. | Number |
Marker size | (number) The size of markers. If the value is more than 0 then markers will be displayed on the chart. Also, all element states will be available. | Number (optional) |
Series 1 - Marker color | The color for the 1st serie markers. | Text |
Series 2 - Marker color | The color for the 2nd serie markers. | Text |
Series 3 - Marker color | The color for the 3rd serie markers. | Color |
Series 4 - Marker color | The color for the 4th serie markers. | Color |
Series 5 - Marker color | The color for the 5th serie markers. | Color |
Series 6 - Marker color | The color for the 6th serie markers. | Color |
Marker fill opacity | (number) The opacity for markers. Accepted values from 0 to 1. | Number |
Series 1 - Marker stroke color | The color for the 1st serie markers stroke. | Text |
Series 2 - Marker stroke color | The color for the 2nd serie markers stroke. | Text |
Series 3 - Marker stroke color | The color for the 3rd serie markers stroke. | Color |
Series 4 - Marker stroke color | The color for the 4th serie markers stroke. | Color |
Series 5 - Marker stroke color | The color for the 5th serie markers stroke. | Color |
Series 6 - Marker stroke color | The color for the 6th serie markers stroke. | Color |
Marker stroke width | (number) The width of markers stroke in px. | Number |
Marker stroke opacity | (number) The opacity for markers stroke. Accepted values from 0 to 1. | Number |
Marker stroke dash array | (number) If the value is more than 0 the markers stroke will be dashed. | Number (optional) |
Show toolbar | This option adds a toolbar to the top-right side of the chart. | Checkbox (yes/no) |
Enable selection | This option adds a selection option to the chart toolbar. | Checkbox (yes/no) |
Selection color | The color for the zoom square. | Color |
Selection opacity | (number) The opacity of zoom square. Accepted values from 0 to 1. | Number |
Selection stroke width | (number) The width of the zoom square stroke in px. | Number |
Selection stroke color | The color of the zoom square stroke. | Color |
Selection stroke opacity | (number) The opacity of zoom square stroke. Accepted values from 0 to 1. | Number |
Enable download | This option adds a download option to the chart toolbar. | Checkbox (yes/no) |
Enable zoom | This option adds a zoom option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomin | This option adds a zoom-in option to the chart toolbar. | Checkbox (yes/no) |
Enable zoomout | This option adds a zoom-out option to the chart toolbar. | Checkbox (yes/no) |
Enable pan | This option adds a pan option to the chart toolbar. | Checkbox (yes/no) |
Enable reset | This option adds a reset option to the chart toolbar. | Checkbox (yes/no) |
Show grid | This option allows displaying grid lines. | Checkbox (yes/no) |
Grid color | The color of grid lines. | Color |
Grid stroke dash array | If the value is more than 0 the grid lines will be dashed. | Text (optional) |
Show x-axis grid lines | This option allows displaying vertical grid lines. | Checkbox (yes/no) |
Show y-axis grid lines | This option allows displaying horizontal grid lines. | Checkbox (yes/no) |
Grid padding top | (number) The top edge padding for the chart. | Number |
Grid padding bottom | (number) The bottom edge padding for the chart. | Number |
Grid padding left | (number) The left edge padding for the chart. | Number |
Grid padding right | (number) The right edge padding for the chart. | Number |
Show tooltip | This option shows a tooltip on the chart on hover. | Checkbox (yes/no) |
Show category on tooltip | This option allows showing the X-axis data in the tooltip. | Checkbox (yes/no) |
Enable fixed tooltip | Fixes the tooltip to the top left of the chart. | Checkbox (yes/no) |
Tooltip follow cursor | Displaying the tooltip beside the cursor on hover. | Checkbox (yes/no) |
Tooltip style | The tooltip theme. Available options: light, dark | Dropdown |
X-axis font color | The font color for X-axis labels. | Color |
X-axis font size | The font size for X-axis labels. | Number |
Show X-axis border | This option allows showing an X-axis border. | Checkbox (yes/no) |
X-axis border height | (number) The width of the X-axis border. If the value is more than 0 the border will be displayed. | Number |
X-axis border color | The color of the X-axis border. | Color |
Show X-axis ticks | This option allows showing the X-axis ticks. | Checkbox (yes/no) |
X-axis ticks height | (number) The size for the X-axis ticks. | Number |
X-axis ticks color | The color for the X-axis ticks. | Color |
Show X-axis tooltip | This option shows a tooltip on X-axis on hover. | Checkbox (yes/no) |
X-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
X-axis crosshair color | The color for the crosshair line. | Color |
X-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis font color | The font color for Y-axis labels. | Color |
Y-axis font size | The font size for Y-axis labels. | Number |
Show Y-axis border | This option allows showing the Y-axis border. | Checkbox (yes/no) |
Y-axis border color | The color of the Y-axis border. | Color |
Show Y-axis ticks | This option allows showing the Y-axis ticks. | Checkbox (yes/no) |
Y-axis ticks color | The color for the Y-axis ticks. | Color |
Show Y-axis tooltip | This option shows a tooltip on Y-axis on hover. | Checkbox (yes/no) |
Y-axis crosshair color | The color for the crosshair line. | Color |
Y-axis crosshair dash array | (number) If the value is more than 0 the crosshair line will be dashed. | Number (optional) |
Y-axis crosshair line width | (number) The size for the crosshair. If the value is more than 0 the crosshair will be displayed. | Number |
Stack charts | Stack the graphs on top of each other. | Checkbox (yes/no) |
Show legend | This option adds a chart legend. | Checkbox (yes/no) |
Legend position | Place of the legend related to the chart. Available options: top, bottom, left, right | Dropdown |
Legend horizontal align | Horizontal alignment of legend. Available options: left, center, right | Dropdown |
Legend font color | The font color for the legend text. | Text |
X offset legend | The left offset of legend in px. | Number |
Y offset legend | The top offset of legend in px. | Number |
Legend font size | The size for the legend text. | Number |
Show Y-axis labels | This option allows showing the Y-axis labels. | Checkbox (yes/no) |
Show X-axis labels | This option allows showing the X-axis labels. | Checkbox (yes/no) |
X-axis label offset | The vertical offset of the X-axis labels. | Number |
X-axis labels min height | (number) The min height for the X-axis labels when they are rotated. | Number (optional) |
X-axis labels max height | (number) The max height for the X-axis labels when they are rotated. | Number |
Y-axis prefix | (optional) (text) Prefix for the Y-axis label. Available options: , $, €, £, ¥, R, ₿, # | Text (optional) |
Y-axis suffix | (optional) (text) Suffix for the Y-axis label. Available options: , %, ?, !, $, €, £, ¥, R, ₿, #, votes, inches, miles, meters, liters, gallons, kWhs | Text (optional) |
Y-axis min value | (number) Force the Y-axis to start from a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Y-axis max value | (number) Force the Y-axis to stop at a specific amount. The graph drawing beyond this number will be clipped off. | Number (optional) |
Tick amount X-axis | The amount of ticks to display on the X-axis. | Number (optional) |
Tick amount Y-axis | The amount of ticks to display on the Y-axis. | Number (optional) |
Render Y-axis on the right | Displaying the Y-axis on the right side of chart. | Checkbox (yes/no) |
Reverse Y-axis | Flip the chart upside down making it inversed and draw the y-axis from bigger to smaller numbers. | Checkbox (yes/no) |
Hide overlapping X-axis labels | This option allows hiding some of the X-axis labels if they overlap others. | Checkbox (yes/no) |
Trim X-axis labels (if needed) | This option trims the label if it’s too long and adds “…” to its end. | Checkbox (yes/no) |
Rotate X-axis labels (if needed) | This option rotates labels if they are too long. | Checkbox (yes/no) |
Always rotate X-axis labels | This option rotates labels permanently. | Checkbox (yes/no) |
Label rotation angle | (number) The angle for the rotation of the label. Accepted negative values. | Number |
Forecast data points | (number) The number of ending data points you want to indicate as forecast or prediction values. | Number |
Forecast fill opacity | (numbner) The opacity for forecast connection points line of series. | Number |
Forecast dash array | (number) If the value is more than 0 the forecast connection points line will be dashed. | Number |
Y-axis title | (optional) (text) The title for Y-axis. | Text (optional) |
X-axis title | (optional) (text) The title for X-axis. | Text (optional) |
2nd Y-axis title | (optional) (text) The title for the 2nd Y-axis. | Text (optional) |
Axis title font size | (number) The font size of titles of axes. | Number |
Axis title font color | The font color of titles of axes. | Color |
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 (yes/no) |
Auto format large numbers | This will truncate large numbers and format them as 1.2k, 3.2m etc. | Checkbox (yes/no) |
Enable animation | This option allows animating the chart. | Checkbox (yes/no) |
Animation speed | (number) This value represents the time in milliseconds allocated for animation. The more value - the more time for animation. | Number |
Animation delay | (number) This value represents the waiting time in milliseconds before animation. | Number |
Syncing ID | This has to be a number. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Works best when ’Tooltip follow cursor’ is turned off. This works between the same kind of charts, for example two area charts or two bar charts. | Number (optional) |
Data label font size | Font size for all data labels. | Number |
Decimal separator | (text) The symbol that separates the decimal part of the number area. | Text |
Thousand separator | (optional) (text) The symbol that separates a thousand value from the rest of the number. | Text (optional) |
Enable events | Markers will require an intersect with the mouse pointer on hover. | Checkbox (yes/no) |
Reset hover state on mouse leave | This will reset the hover values (states) when the chart isn’t being hovered. Normally this state will not be reset on mouse leave. | Checkbox (yes/no) |
Enable color change on hover | Changes the chart colors on hover. | Checkbox (yes/no) |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Replace 0 with null (Y-axis) | This option allows to replacement of all 0 values from provided data. | Checkbox (yes/no) |
Replace null/undefined with previous | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Show cumulative data | Displays the cumulative sum of series data labels when the chart is stacked. | Checkbox (yes/no) |
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 | The top offset of custom tooltip in px. | Number |
2nd Y-axis series name | (optional) (text) The series name to assign for the second Y-axis. Please provide one of the series names that was assigned for one of the series. | Text (optional) |
2nd Y-axis suffix | (optional) (text) Suffix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis prefix | (optional) (text) Prefix for the 2nd Y-axis label. | Text (optional) |
2nd Y-axis min value | Force the 2nd Y-axis to start from a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
2nd Y-axis max value | Force the 2nd Y-axis to stop at a specific amount (number). The graph drawing beyond this number will be clipped off. | Number (optional) |
Use JSON array as data series | Enables series insertion thru the JSON format. | Checkbox (yes/no) |
JSON array | (optional) Adds more series to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text (optional) |
Enable point annotations | Enables point annotation insertion thru the JSON format. | Checkbox (yes/no) |
Point annotation JSON | Adds the point annotations to the chart. Must follow the JSON example in a precise way, any issue in it may cause errors. | Text |
Element Actions
Hide Data Series - This will hide a data series (not deleting it).
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to hide. | Text |
Show Data Series - This will allow you to show a hidden series programmatically.
Title | Description | Type |
Data series name | This is the name of the data series you want to show. | Text |
Re-render - This action is used to redraw the chart.
Add Y-axis Annotation - This action is used to add the Y-axis annotation on the chart.
Fields
Title | Description | Type |
Y value 1 | (number) The existent value from the Y-axis range. | Number |
Y value 2 | (number) The second existent value from the Y-axis range. | Number (optional) |
Color | The color for filling the range between both provided values. | Color |
Fill opacity | (number) The opacity of the range between both provided values. Accepted value from 0 to 1. | Number |
Border color | The color for the label border. | Color |
Font color | The color for the text from the label. | Color |
Annotation text | (text) The text, which represents the annotation. | Text |
Label border color | The color for the label border. | Color |
Stroke dash array | (number) If the value is bigger than 0 the edges or line will be dashed. | Number |
Push to memory | When enabled, it preserves the annotations in subsequent chart updates. If you don’t want it to be saved for the next updates, turn off this option. | Checkbox (yes/no) |
Append Data Series - This will append (add) an extra data series to your chart.
Fields
Title | Description | Type |
Series name | Name of the new data series. | Text |
Data series | Y-axis data for the new chart (list of numbers). | Number (optional) |
Data series (comma separated) (optional) | (optional) You can use this field if you want to specify a comma separated list instead of a dynamic list from the “Data series” field. | Text (optional) |
Chart color | The color for the new serie. | Color |
Gradient to color | The 2nd gradient color for the new serie. It will be applied if only the “gradient” option was selected from the “Color style” dropdown. | Color |
Marker color | The color for the new serie markers. | Color |
Marker stroke color | The color for the new serie markers stroke. | Color |
Replace null/undefined values with 0 (Y-axis) | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Replace 0 with null (Y-axis) | This option allows to replacement of all 0 values from provided data. | Checkbox (yes/no) |
Replace null with previous | This option allows to replacement of all “null” or “undefined” values from provided data. | Checkbox (yes/no) |
Show cumulative data | Displays the cumulative sum of series data labels when the chart is stacked. | Checkbox (yes/no) |
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Clear Annotations - This action is used to remove all annotations from the chart.
Remove Annotation - This action is used to remove an annotation from the chart.
Fields
Title | Description | Type |
Annotation text | (text) The text, which represents the annotation. | Text |
Update Appended Data Series - This action is used to update a data series of existent serie from the chart.
Fields
Title | Description | Type |
Series name to update | The name of the appended data series you want to update. | Text |
Updated data series | The data of the appended data series you want to update. | Number |
Remove All Appended Data Series - This action is used to remove all appended data series from the chart.
Clear a Selection - This action is used to remove a selection from the chart.
Remove Appended Data Series - This action is used to remove an appended data series from the chart.
Fields
Title | Description | Type |
Data series name | This is the name of the data series you want to remove. | Text |
Element Events
Title | Description |
Data point is clicked | This event is triggered when the chart is clicked. |
PNG URL Is Created | This event is triggered when the PNG URL is available. |
Element States
Title | Description | Type |
Selected label | (text) Returns the selected label when the chart has clicked. | Text |
Selected value | (number) Returns the selected value when the chart has clicked. | Number |
Is loaded? | (yes/no) Indicates that the chart was fully loaded. | Checkbox (yes/no) |
Selected index value | (number) Returns the index of the selected value when the chart has clicked. | Number |
Last selected label on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value when the chart has hovered. | Text |
Last selected value on hover (must have events enabled or custom tooltips) | (number) Returns the last of the selected value when the chart has hovered. | Number |
PNG URL | (text) Returns the generated PNG url after execution of the “Generate PNG URL” action. | Text |
Last selected index on hover (must have events enabled or custom tooltips) | (number) Returns the index of the selected value when the chart has hovered. | Number |
Last selected color code on hover (must have events enabled or custom tooltips) | (text) Returns the last of the selected value color when the chart has hovered. | Text |
Last selected series name on hover (must have events enabled or custom tooltips) | (text) Returns the series name of the selected value when the chart has hovered. | Text |
Data series 1 | (list of numbers) Returns the 1st series data. | Number |
Data series 2 | (list of numbers) Returns the 2nd series data. | Number |
Data series 3 | (list of numbers) Returns the 3rd series data. | Number |
Data series 4 | (list of numbers) Returns the 4th series data. | Number |
Data series 5 | (list of numbers) Returns the 5th series data. | Number |
Data series 6 | (list of numbers) Returns the 6th series data. | Number |
Selection Start Index | (number) Returns the start index of the X-axis label when the part of chart has selected. | Number |
Selection End Index | (number) Returns the stop index of the X-axis label when the part of chart has selected. | Number |
Changelogs
Update 19.02.25 - Version 6.149.0
- Added "Y-axis label align" & "2nd Y-axis label align" fields [Bar Chart (Multiple Series)].
Update 03.02.25 - Version 6.148.0
- Added "Reverse series order on tooltip" field. [Bar Chart (Multiple Series)].
Update 30.01.25 - Version 6.147.0
- Fixed re-render of chart. [World / Geo Map Chart].
Update 02.01.25 - Version 6.145.0
- Added "Append data series" action [Radar].
Update 23.12.24 - Version 6.144.0
- Fixed trigger of elements' events.
Update 10.10.24 - Version 6.143.0
- Acquired by Zeroqode.
Update 02.10.24 - Version 6.142.6
- Fixed a display bug caused by data labels with prefixes/suffixes on the Pie, Donut and Polar Area Charts.
Update 28.09.24 - Version 6.142.5
- Updated labels.
Update 27.09.24 - Version 6.142.4
- Added "Transparent stroke" option to Bar Chart - Multiple Series.
Update 19.09.24 - Version 6.142.3
- Fixed a bug regarding the thousand separator on the data label for the Pie/Donut/Polar Area Charts. .
Update 03.09.24 - Version 6.142.2
- Fixed a bug for the PNG export for some charts.
Update 31.08.24 - Version 6.142.1
- Improvements for the Geo Chart.
Update 31.08.24 - Version 6.142.0
- Multi Area/Bar/Line now have support for JSON Point Annotions.
Update 28.08.24 - Version 6.141.2
- Fixed a bug causing the BG of the PNG export to be black.
Update 27.08.24 - Version 6.141.1
- Improvements for appending series to the Bar Chart.
Update 27.08.24 - Version 6.141.0
- Improvements for removing appended data series.
Update 12.08.24 - Version 6.140.0
- Added "Border Radius" property to Gantt/Timeline chart.
Update 28.07.24 - Version 6.139.1
- Added option to change "days"/"day" label Gantt Chart.
Update 25.07.24 - Version 6.139.0
- Added localization options to the Gantt chart.
Update 25.07.24 - Version 6.138.1
- Improvements for the 6.138.0 update.
Update 25.07.24 - Version 6.138.0
- Added "Distributed Color List" feature to Treemap Chart.
Update 22.07.24 - Version 6.137.6
- Fix for background color in PNG export.
Update 15.07.24 - Version 6.137.5
- Improvements for simple list calculations.
Update 07.07.24 - Version 6.137.4
- Fixed a bug regarding Scatter chart annotations.
Update 17.06.24 - Version 6.137.3
- Improvements for empty gantt chart labels.
Update 17.06.24 - Version 6.137.2
- Improvements for custom tooltip parent container background.
Update 16.06.24 - Version 6.137.1
- Added the "JSON array" feature to the Gantt/Timeline Chart.
Update 02.06.24 - Version 6.137.0
- Added the Axis Title feature to the charts.
Update 07.05.24 - Version 6.136.2
- Improvements for the use of a second Y-axis.
Update 26.04.24 - Version 6.136.1
- Added comma separator option to append action Bar chart Multiple Series.
Update 23.04.24 - Version 6.136.0
- Added the "Legend horizontal alignment" feature.
Update 11.04.24 - Version 6.135.10
- Improvements for the append action for the gantt/timeline chart.
Update 11.04.24 - Version 6.135.9
- Improved resizing event for some charts.
Update 10.04.24 - Version 6.135.8
- Bug fix for the 6.135.7 update.
Update 10.04.24 - Version 6.135.7
- Improved appending of data series for some charts.
Update 10.04.24 - Version 6.135.6
- Improved re-rendering for some charts.
Update 09.04.24 - Version 6.135.5
- Render improvements bar chart - multiple series.
Update 09.04.24 - Version 6.135.4
- Improvements.
Update 09.04.24 - Version 6.135.3
- Improvements for the Area Chart - Multiple Series.
Update 02.04.24 - Version 6.135.2
- Added the "group rows" feature to the Gantt/Timeline Chart.
Update 31.03.24 - Version 6.135.1
- Improved workflow actions for most of the charts.
Update 27.03.24 - Version 6.135.0
- Fixed a bug that occurred when using a second Y-axis.
Update 20.03.24 - Version 6.134.2
- Minor improvements.
Update 14.03.24 - Version 6.134.1
- Improved the states for the Bubble Chart.
Update 14.03.24 - Version 6.134.0
- Added X, Y and Z decimal control for the Bubble chart and X and Y axis decimal control for the Scatter chart.
Update 14.03.24 - Version 6.133.0
- Fixed a bug regarding the Thousand Separator for the Waterfall Chart + Added the "Auto Format Large Numbers" feature .
Update 11.03.24 - Version 6.132.4
- Added the "Last selected data label on hover" state for the Bubble chart.
Update 09.03.24 - Version 6.132.3
- Monochrome mode for Pie, Donut and Polar Area now supports color variables.
Update 08.03.24 - Version 6.132.2
- Added the option to display dates in user timezone for Gantt Chart (Enabled by default).
Update 05.03.24 - Version 6.132.1
- Description update.
Update 26.02.24 - Version 6.132.0
- Added Border radius property to the Treemap Chart + Upgraded the ApexCharts Library.
Update 16.02.24 - Version 6.131.0
- 🆕 📊 Added the Line Chart (Multiple Series)!.
Update 13.02.24 - Version 6.130.5
- Fixed a bug where the thousand separator did not work for the 'total' value on the donut chart.
Update 20.01.24 - Version 6.130.4
- The Polar Area Chart now has the option to show the value instead of percentage on the data labels.
Update 14.01.24 - Version 6.130.3
- Added the option to show the value instead percentage on the data labels for the Pie and Donut chart.
Update 09.01.24 - Version 6.130.2
- Updated the Treemap chart to support color variables.
Update 24.12.23 - Version 6.130.1
- Improvements for the Gantt Chart.
Update 22.12.23 - Version 6.130.0
- Radar chart now support style variables.
Update 20.12.23 - Version 6.129.0
- The feature that replaces null/undefined values with 0 (Y-axis) is now enabled by default for some charts.
Update 13.12.23 - Version 6.128.0
- Improved the live updating of charts.
Update 09.12.23 - Version 6.127.0
- Improved the Tooltip for Pie, Donut and Polar Area. Polar Area now supports CSV data and more!.
Update 09.12.23 - Version 6.126.2
- Improved plugin field captions.
Update 08.12.23 - Version 6.126.1
- Improvements for the 6.126.0 update.
Update 08.12.23 - Version 6.126.0
- You can now supply a JSON list of objects for the Bar and Area multiple series chart as data!.
Update 30.11.23 - Version 6.125.0
- Added "Remove appended series" and "Remove All" Appended data series for the mixed chart + other optimizations.
Update 18.11.23 - Version 6.124.3
- Sankey chart improvements.
Update 14.11.23 - Version 6.124.2
- Improvements.
Update 14.11.23 - Version 6.124.1
- Fixed a bug regarding the Mixed Chart in Sparkline mode.
Update 14.11.23 - Version 6.124.0
- Enhanced resize event processing and resolved an issue where chart lines were truncated..
Update 12.11.23 - Version 6.123.1
- Improved Funnel Chart Tooltip.
Update 10.11.23 - Version 6.123.0
- Improved the Tooltip Design.
Update 06.11.23 - Version 6.122.1
- Added the border radius property to the waterfall chart.
Update 06.11.23 - Version 6.122.0
- Added comma separated fields to the area charts! Fixed a bug regarding the total value on the donut chart..
Update 03.11.23 - Version 6.121.4
- Added more features to the Geo Chart.
Update 03.11.23 - Version 6.121.3
- Added ability to specify Legend text stroke color for the geo chart.
Update 02.11.23 - Version 6.121.2
- Improvements for the Geo Chart.
Update 02.11.23 - Version 6.121.1
- Bug fix for the Heatmap Chart.
Update 02.11.23 - Version 6.121.0
- Added the Geo Chart!.
Update 31.10.23 - Version 6.120.1
- Patch.
Update 31.10.23 - Version 6.120.0
- Improved first render + Heatmap with empty data.
Update 28.10.23 - Version 6.119.1
- Minor improvements.
Update 28.10.23 - Version 6.119.0
- Sparline improvements.
Update 28.10.23 - Version 6.118.0
- Upgraded to the latest version of ApexCharts.js.
Update 24.10.23 - Version 6.117.0
- Improvements for the Y-axis annotation feature.
Update 19.10.23 - Version 6.116.1
- Fixed a bug causing the Treemap datalabel values to be 0.
Update 05.10.23 - Version 6.116.0
- Fixed a bug regarding data labels for 100% stacked bar charts.
Update 02.10.23 - Version 6.115.0
- Added 'auto format large numbers' feature to the Pie and Donut chart.
Update 28.09.23 - Version 6.114.1
- Fixed a bug regarding the gradient color regarding the 6th data series from the Area Chart.
Update 25.09.23 - Version 6.114.0
- Added the color range feature to the Heatmap chart as well.
Update 24.09.23 - Version 6.113.0
- Fixed a bug regarding hover states for the Area and Bar chart.
Update 21.09.23 - Version 6.112.0
- Added the ability to specify the data label source when appending data series to the Scatter and Bubble chart!.
Update 20.09.23 - Version 6.111.0
- You can know specify datalabels for every data series for the Bubble and Scatter chart.
Update 13.09.23 - Version 6.110.1
- Improvements for the 6.110.0 update.
Update 13.09.23 - Version 6.110.0
- Added the ability to specify Custom Y-axis labels for the Gantt chart.
Update 13.09.23 - Version 6.109.0
- Added default Zoom options to the Gantt chart.
Update 06.09.23 - Version 6.108.0
- Added a workflow action to remove a single appended data series for the bar and area charts.
Update 05.09.23 - Version 6.107.0
- Added the ability to specify the min and max value for the 2nd Y-axis.
Update 05.09.23 - Version 6.106.0
- Added the ability to specify the min and max value for the 2nd Y-axis.
Update 05.09.23 - Version 6.105.0
- Added the ability to specify the min and max value for the 2nd Y-axis.
Update 02.09.23 - Version 6.104.0
- Fixed a bug that caused weird formatting when having more than 3 decimals.
Update 31.07.23 - Version 6.103.2
- Description update.
Update 25.07.23 - Version 6.103.1
- Improvements.
Update 25.07.23 - Version 6.103.0
- Fixed a bug regarding label size for the donut chart.
Update 25.07.23 - Version 6.102.0
- Fixed a bug regarding the Waterfall Chart.
Update 18.07.23 - Version 6.101.0
- 'Auto format large numbers' now supports negative values + The single series area chart now also supports this feature!.
Update 15.07.23 - Version 6.100.0
- Added hover states for the Range Area Chart.
Update 26.06.23 - Version 6.99.0
- Fixed a bug regarding ticks showing on the Treemap chart + added a font weight selector for the Treemap data labels .
Update 22.06.23 - Version 6.98.2
- Bug fix regarding the bar width + height for the Bar chart.
Update 22.06.23 - Version 6.98.1
- Improvements.
Update 22.06.23 - Version 6.98.0
- 🆕 Added 2 new charts: Range Area Chart + Horizontal Box and Whisker chart.
Update 19.06.23 - Version 6.97.2
- Description update.
Update 14.06.23 - Version 6.97.1
- Improvements for the 6.97.0 update.
Update 14.06.23 - Version 6.97.0
- Improved the color handeling of the charts, most color fields should support color variables!.
Update 06.06.23 - Version 6.96.0
- Fixed a bug regarding empty values on the pie and donut chart.
Update 06.06.23 - Version 6.95.0
- Added a click event, hover and click states to the Treemap chart.
Update 26.05.23 - Version 6.94.1
- Small improvements.
Update 26.05.23 - Version 6.94.0
- Added the feature "Hide datalabels for 0 / empty values" for the bar charts and pyramid chart.
Update 21.05.23 - Version 6.93.1
- Description update.
Update 08.05.23 - Version 6.93.0
- Added the 'Auto format large numbers' feature to the Bar Chart (single series).
Update 23.04.23 - Version 6.92.0
- Fixed a bug regarding the Z-axis tooltip value for the Bubble chart.
Update 12.04.23 - Version 6.91.0
- Added a new state to the Donut, Pie and Polar Area chart that contains the color code of the hovered value.
Update 06.04.23 - Version 6.90.0
- Improved both bar charts empty states + added a comma separated field for the categories.
Update 30.03.23 - Version 6.89.0
- Fixed a bug regarding the Thousand Separator on the Waterfall chart.
Update 29.03.23 - Version 6.88.0
- Improvements for the Bar Chart (Multiple Series).
Update 29.03.23 - Version 6.87.4
- Improvements.
Update 29.03.23 - Version 6.87.3
- Improvements for the color list for the pie and donut chart.
Update 29.03.23 - Version 6.87.2
- Improvements.
Update 29.03.23 - Version 6.87.1
- Improvements for the previous update.
Update 28.03.23 - Version 6.87.0
- 100% Stacked Bar Chart Data Labels will not be percentages anymore.
Update 28.03.23 - Version 6.86.0
- You can now supply a comma separated 'Color list' for the Waterfall chart.
Update 22.03.23 - Version 6.85.0
- Fixed a bug regarding the mixed chart and the 'Render Y-axis on the right' feature.
Update 19.03.23 - Version 6.84.0
- Added Border Radius properties for the Bar Charts.
Update 19.03.23 - Version 6.83.0
- Fixed a bug with the fonts on the Bar Charts.
Update 12.03.23 - Version 6.82.1
- Fixes.
Update 03.03.23 - Version 6.82.0
- Added the 'Render Y-axis on the right' for all Y-axis Charts.
Update 27.02.23 - Version 6.81.0
- Added comma separated fields for the pie and donut chart to use as data.
Update 26.02.23 - Version 6.80.0
- Added the option to 'Render Y-axis on the right' for Area and Bar chart multiple bars.
Update 24.02.23 - Version 6.79.0
- Added 'Y-axis max' feature to the Polar Area Chart.
Update 22.02.23 - Version 6.78.1
- Bug fix for previous version.
Update 22.02.23 - Version 6.78.0
- Added comma separated data fields for the bar chart - multiple series + More....
Update 16.02.23 - Version 6.77.0
- Fixed a bug regarding data labels for the 2nd y-axis.
Update 15.02.23 - Version 6.76.1
- Fixed a bug regarding the label suffix for the 2nd Y-axis.
Update 15.02.23 - Version 6.76.0
- Added 'Auto format large numbers' feature for the Area Chart Multiple series & Bar Chart Multiple series.
Update 02.02.23 - Version 6.75.0
- Added 'Remove All Appended Data Series' for the 'bar chart multiple series'.
Update 01.02.23 - Version 6.74.2
- Improvements.
Update 01.02.23 - Version 6.74.1
- Improvements.
Update 01.02.23 - Version 6.74.0
- Added 'Auto format large numbers' feature for the mixed chart.
Update 01.02.23 - Version 6.73.0
- Added 'Data Series' states for the mixed chart.
Update 01.02.23 - Version 6.72.2
- Improvements.
Update 01.02.23 - Version 6.72.1
- Improvements.
Update 01.02.23 - Version 6.72.0
- Added WF actions and states regarding the Selection feature to more charts.
Update 28.01.23 - Version 6.71.0
- Added the 'Remove All Appended Data Series' WF action for the Area Chart Multiple Series.
Update 22.01.23 - Version 6.70.0
- Added a way to specify a list of colors fro the polar area, pie and donut chart.
Update 16.01.23 - Version 6.69.7
- Updated documentation.
Update 16.01.23 - Version 6.69.6
- Updated documentation.
Update 14.01.23 - Version 6.69.5
- Improvements.
Update 13.01.23 - Version 6.69.4
- Improvements.
Update 12.01.23 - Version 6.69.3
- Improvements.
Update 12.01.23 - Version 6.69.2
- Documentation updated.
Update 12.01.23 - Version 6.69.1
- Improvements.
Update 12.01.23 - Version 6.69.0
- Added the Sankey chart!.
Update 11.01.23 - Version 6.68.0
- Fixed a bug regarding the 'data point is clicked' WF action for the waterfall chart.
Update 11.01.23 - Version 6.67.2
- Improvements.
Update 11.01.23 - Version 6.67.1
- Added the option to change the 'series name' for the waterfall chart.
Update 11.01.23 - Version 6.67.0
- Added the ability to specify a different color for negative values for the waterfall chart.
Update 05.01.23 - Version 6.66.1
- Improvements.
Update 05.01.23 - Version 6.66.0
- Improved the 'color change on hover' behaviour of the charts.
Update 05.01.23 - Version 6.65.0
- Added the Waterfall Chart!.
Update 30.12.22 - Version 6.64.0
- The Treemap Chart now supports color ranges!.
Update 12.12.22 - Version 6.63.0
- Improvements for dynamically changing the data source of the chart .
Update 09.12.22 - Version 6.62.0
- Added 'start angle' and 'end angle' properties to the Donut, Pie and Polar Area chart.
Update 08.12.22 - Version 6.61.1
- Improvements.
Update 05.12.22 - Version 6.61.0
- Added a field to control the 'X-axis label rotation angle' and a checkbox to always rotate the X-axis labels.
Update 28.11.22 - Version 6.60.1
- Improvements.
Update 28.11.22 - Version 6.60.0
- Added more control how X-Axis labels are rendered (incl. rotation!).
Update 11.10.22 - Version 6.59.1
- Improvements.
Update 10.10.22 - Version 6.59.0
- Added 2 new charts! 1 - [1 Dimensional Funnel Chart] 2 - [2 Dimensional Funnel Chart].
Update 09.10.22 - Version 6.58.0
- Added the 'Tick amount X-axis' field for both the bar chart & the bar chart multiple bars!.
Update 07.10.22 - Version 6.57.1
- Fixes.
Update 16.09.22 - Version 6.57.0
- Added a feature that allows you to add a list of texts that will be used as data labels for the Bubble & Scatter chart!.
Update 13.09.22 - Version 6.56.1
- Improvements.
Update 05.09.22 - Version 6.56.0
- Updated to the latest version of ApexCharts.js.
Update 05.09.22 - Version 6.55.0
- Updated the Area Chart Multiple Lines to support up to 6 series!.
Update 30.08.22 - Version 6.54.0
- Added the option to X-axis and Y-axis titles to the Area chart (multiple line) and the Mixed chart.
Update 24.08.22 - Version 6.53.0
- Added the ability create an annotation on the Gantt chart for the current time.
Update 16.08.22 - Version 6.52.1
- Improvements for the X-axis labels for the Mixed Chart.
Update 09.08.22 - Version 6.52.0
- Fixed the rotating and overlapping labels bug.
Update 08.08.22 - Version 6.51.1
- Improvements.
Update 15.06.22 - Version 6.51.0
- Fully compatible with the new responsive engine!.
Update 12.04.22 - Version 6.50.2
- Improvements.
Update 12.04.22 - Version 6.50.1
- Bug fix for the pyramid chart.
Update 28.03.22 - Version 6.50.0
- Added the feature to supply a list of (hex) colors to give every individual bar of the bar chart a different color!.
Update 22.02.22 - Version 6.49.0
- Added the 'Column width' property to the Mixed Bar/Area chart.
Update 14.02.22 - Version 6.48.0
- Big update: Added the 'Do not refresh' feature for all charts & greatly improved the re-render workflow action!.
Update 12.02.22 - Version 6.47.1
- Improvements.
Update 11.02.22 - Version 6.47.0
- Added the 'End angle' parameter for the donut chart.
Update 11.02.22 - Version 6.46.0
- Added the 'X-axis label min height' parameter for the Line, Area and Bar charts.
Update 11.02.22 - Version 6.45.0
- Added the 'Trim' parameter for the Line, Area and Bar charts.
Update 10.02.22 - Version 6.44.0
- Added a 'Zoom' workflow action to zoom in and out of the Gantt/Timeline chart.
Update 08.02.22 - Version 6.43.0
- Bug fixes for Y-axis and X-axis tick amount for the mixed chart.
Update 13.01.22 - Version 6.42.1
- Fixed a bug caused by the 6.41.0 update.
Update 13.01.22 - Version 6.42.0
- Fixed a bug for the Area chat max label height .
Update 07.01.22 - Version 6.41.0
- Fixed an issue with the tick amount on the Y-axis for multi area charts.
Update 22.08.21 - Version 6.40.0
- Improved the 2nd Y-axis feature.
Update 22.08.21 - Version 6.39.0
- Improved the way the plugin handles empty category values.
Update 08.08.21 - Version 6.38.0
- Greatly improved the chart PNG export quality.
Update 05.08.21 - Version 6.37.0
- Added the ability to change the data label font color for the bar charts.
Update 05.08.21 - Version 6.36.2
- Fixed a bug that caused the inner size of the donut chart not to update .
Update 03.08.21 - Version 6.36.1
- Minor improvements.
Update 02.08.21 - Version 6.36.0
- Added the feature to select data points to use as forecast values.
Update 14.07.21 - Version 6.35.0
- Added the 'Update appended data series' workflow action for the bar chart - multiple bars.
Update 01.07.21 - Version 6.34.1
- Improvements for the 6.34.0 update.
Update 01.07.21 - Version 6.34.0
- Added the 'Show value on data label' and 'Data label Y offset' fields for the Treemap chart.
Update 17.06.21 - Version 6.33.0
- Added the ability to specify the data label font color of the Treemap chart.
Update 17.06.21 - Version 6.32.0
- Added the 'Reverse negative shade' feature for the Treemap chart.
Update 16.06.21 - Version 6.31.0
- Added the ability to change the data label font color for the Heatmap.
Update 06.06.21 - Version 6.30.0
- Added the 'convert area to line' option for the mixed chart.
Update 04.06.21 - Version 6.29.1
- Improvements for the 6.29.0 update.
Update 04.06.21 - Version 6.29.0
- Added labels for the donut chart. Added the option to change the data label font color for the Pie and Donut charts. .
Update 29.05.21 - Version 6.28.0
- Added the feature to replace null/undefined values with the previous value for the Area Chart - Multiple Lines.
Update 28.05.21 - Version 6.27.0
- Fixed a bug where missing X-axis values caused unexpected behavior .
Update 27.05.21 - Version 6.26.0
- Added the option to display cumulative data for the 'Area chart - multiple lines'.
Update 26.05.21 - Version 6.25.1
- Improvements for the custom tooltip and append workflow action for the Area Chart - Multiple Lines.
Update 22.05.21 - Version 6.25.0
- Added the Pyramid Chart!.
Update 20.05.21 - Version 6.24.1
- Added a custom interval grouping feature to the Simple List Calculation element + improvements for the 6.24.0 update..
Update 19.05.21 - Version 6.24.0
- Added the 'Simple List Calculation' element to make calculations on a list before you show it on the charts!.
Update 18.05.21 - Version 6.23.0
- Added a feature to update the data for an appended data series for the Area chart - multiple lines.
Update 17.05.21 - Version 6.22.0
- Added the option to specify the legend text Y offset for Donut and Pie charts.
Update 16.05.21 - Version 6.21.0
- Added the option to specify the legend font size for pie and donut charts.
Update 12.05.21 - Version 6.20.0
- Added the option to replace 0's with null values for the 'Area chart - Multiple lines' chart.
Update 08.05.21 - Version 6.19.0
- Added the option to specify the data label offset for Pie and Donut charts..
Update 04.05.21 - Version 6.18.0
- Added the option to specify the tick amount for the Y-axis. Fixed a bug regarding max Y-axis values..
Update 29.04.21 - Version 6.17.1
- Improvements for the 6.17.0 update.
Update 29.04.21 - Version 6.17.0
- Added the 'Mixed Chart - Area + Bar'.
Update 18.04.21 - Version 6.16.1
- Minor improvements.
Update 18.04.21 - Version 6.16.0
- Fixed a bug that caused the Treemap chart not to render when data was updated.
Update 13.04.21 - Version 6.15.0
- The Y-axis will now better handle decimal values automatically .
Update 07.04.21 - Version 6.14.0
- Added support for reverse Y-axis.
Update 28.03.21 - Version 6.13.0
- Added the ability to specify the amount of ticks on the X-axis.
Update 14.03.21 - Version 6.12.1
- Improvements for the 6.12.0 update.
Update 14.03.21 - Version 6.12.0
- Added the Gantt/Timeline chart!.
Update 07.03.21 - Version 6.11.0
- 1 - Added the Box & Whisker Chart! 2 - Radial charts now have the ‘sparkline’ property & much more!.
Update 23.02.21 - Version 6.10.0
- Added a way to enable/disable the 'Reverse negative shade' and added more stroke width options for the heatmap.
Update 19.02.21 - Version 6.9.0
- Added the option to specify custom pre- and suffixes for the second Y-axis.
Update 06.02.21 - Version 6.8.0
- Added the 'Remove' and 'Clear' Annotations workflow actions..
Update 02.02.21 - Version 6.7.0
- Improvements for the 6.6.0 update.
Update 02.02.21 - Version 6.6.0
- You can now specify a series name to be placed on a second Y-axis for the Area and Bar chart multiple series.
Update 27.01.21 - Version 6.5.0
- Added the option to specify the X-axis label height (default 120px).
Update 22.01.21 - Version 6.4.0
- Fixed a bug where the legend disappears when using empty data arrays.
Update 16.01.21 - Version 6.3.1
- Improvements for the legend position regarding the pie/donut chart..
Update 14.01.21 - Version 6.3.0
- Hex colours are now supported when using dynamic colours (from a database) + minor improvements..
Update 10.01.21 - Version 6.2.0
- Added the 'X offset', 'Y offset' and 'legend font size' properties for all charts with legends..
Update 05.01.21 - Version 6.1.1
- Minor improvements.
Update 04.01.21 - Version 6.1.0
- Events don't have to be enabled anymore for custom tooltips (line & area charts)..
Update 04.01.21 - Version 6.0.0
- Added the Bubble chart!.
Update 22.12.20 - Version 5.7.1
- Improvements for the treemap chart .
Update 17.12.20 - Version 5.7.0
- Improved label width for long texts. Added min and Max X-axis properties for the candlestick chart. Custom tooltips!.
Update 05.12.20 - Version 5.6.0
- Added the option to specify the vertical offset for the X-axis labels.
Update 01.12.20 - Version 5.5.1
- Improvements for the Y-axis offset (radial chart)..
Update 30.11.20 - Version 5.5.0
- Added the option to replace null/undefined values with 0 for the Line, Area and Area - multiple lines chart..
Update 29.11.20 - Version 5.4.1
- Minor improvement for the 5.4.0 update.
Update 28.11.20 - Version 5.4.0
- Changed the prefix and suffix dropdowns with text inputs..
Update 25.11.20 - Version 5.3.0
- Added a way to turn off the change of color on hover. Minor improvements..
Update 22.11.20 - Version 5.2.0
- Every chart now has an associated workflow action to get the PNG url of the chart!.
Update 08.11.20 - Version 5.1.1
- Small improvements for the 5.1.0 update.
Update 08.11.20 - Version 5.1.0
- Added annotation support for the Line, Area, Area - multiple lines, Bar, Bar - multiple lines, Scatter, Radar and Candle.
Update 27.10.20 - Version 5.0.0
- Added 2 new charts (polar area & treemap), added a new monochrome mode for selected charts and more....
Update 23.09.20 - Version 4.11.0
- Added the ability to specify min/max values for the X and Y axis of the Scatter chart.
Update 08.09.20 - Version 4.10.0
- All the charts (except radar) will return the value of the data point that is hovered as a state..
Update 30.08.20 - Version 4.9.0
- Fixed a bug regarding the 'hide Y-axis labels' option for line charts.
Update 13.08.20 - Version 4.8.0
- 1 - Append unlimited more data series to the scatter chart. 2 - Hide / show workflow actions for scatter chart..
Update 31.07.20 - Version 4.7.0
- 1 - Multi series charts now only require 1 data series (instead of 2)! 2 - Added the stack 100% option for bar charts.
Update 23.07.20 - Version 4.6.0
- 1 - Added the ‘Name offset’ and ‘Value offset’ for the radial chart. 2 - Added separators for the chart properties.
Update 09.07.20 - Version 4.5.0
- 1 - The radar chart now supports up to 4 data series! 2 - Legends are now supported with radar charts.
Update 23.06.20 - Version 4.4.0
- The scatter chart now only needs 1 data serie..
Update 11.06.20 - Version 4.3.0
- Added the ‘Bar width’, ‘Bar height’ (for horizontal bar charts) and the ‘Starting shape’ property for the single and multiple bar charts..
Update 01.06.20 - Version 4.2.0
- 1 - Added the option to specify a minimum and maximum value for the Y-axis.
Update 25.05.20 - Version 4.1.0
- 1 - Events return index number. 2 - ’Start angle’ property add for pie and donut. 3 - Rands (R) currency added to prefixes and suffixes. 4 - Upgraded to the latest version of Apexcharts..
Update 19.05.20 - Version 4.0.0
- 1 - New chart: Scatter. 2 - Add up to 4 data series for multiple line / bar chart. 3 - Hide the X-axis and Y-axis labels separately. 4 - Added a re-render workflow action. 5 - Bug fixes..
Update 05.05.20 - Version 3.1.0
- 1 - All charts now have an ‘Is loaded?’ state. 2 - You can now add unlimited more data series to the Bar chart 2 bars! 3 - Added the option ‘Show category on tooltip’, ‘Enable fixed tooltip’ and to place data labels at the top of bar charts . 4 - The list with suffixes now also contains currencies. 5 - Added more marker style options for the Radar chart..
Update 01.05.20 - Version 3.0.0
- 1 - Added the Candlestick chart! 2 - The Radial chart has two extra fields for single values. 3 - Bug fixes for horizontal bar charts. 4 - Added custom thousands separators. 5 - You can now change the inner donut size. 6 - 6 - Added an extra color field for donut and pie charts..
Update 27.04.20 - Version 2.1.0
- 1 - Events added for all charts (except Radar)! 2 - Unique ID no longer required. 3 - Thousands have comma as separator. 4 - Added more suffix options. 5 - Improved the dropshadow on the tooltips. 6 - Charts handle data from API calls much better..
Update 24.04.20 - Version 2.0.0
- 1 - New charts added (Heatmap & Radar). 2 - Multiple workflow actions added for certain charts. 3 - Plugin handles searching for large amounts of data much better. 4 - Added ‘fill color opacity’ field for bar charts. 5 - The ‘hideDuplicates’ property is now turned off for the x-axis. 6 - Multiple minor bug fixes..
Update 10.04.20 - Version 1.7.0
- Charts with empty/null values will not cause errors anymore..
Update 06.04.20 - Version 1.6.0
- 1 - You can now change all the charts properties dynamically in the condition editor! 2 - Donut and Pie charts will now have % symbol as suffix on their data labels..
Update 31.03.20 - Version 1.5.0
- 1 - Data labels will have the same amount of decimals as on the Y-axis/tooltip. 2 - Added a field to alter the data label font size. 3 - Added the option to add a prefix and/or suffix to Y-axis/tooltip/data label..
Update 29.03.20 - Version 1.4.0
- Fixed the issue that charts sometimes didn't draw when upgrading to the 1.3.0 version.
Update 29.03.20 - Version 1.3.0
- 1 - BREAKING: Replaced the remaining color fields by native Bubble color pickers. NOTE: Your color fields may be overwritten by the default value! 2 - Added stroke color fields for donut/pie chart. 3 - Option to sync charts. 4 - Ability to choose the amount of decimals on Y-axis..
Update 24.03.20 - Version 1.2.0
- Added the option to change the animation speed of the chart (+ the option to disable the animation).
Update 22.03.20 - Version 1.1.0
- Added a field to change the crosshair background color for the bar charts.
Update 18.03.20 - Version 1.0.0
- Launch.