This plugin provides 182 customizable charts that help you to create beautiful and interactive visualizations for the app. The plugin elements are optimized and developed with many useful options. Each element has a variety of actions and events that allow the creation of user-friendly functionality. Plugin provides customization for the Background grid color, Zoom selection color/opacity/stroke, Summed data tables on the stacked chart, 2nd Y-Axis color/border/title. Check out the range of this plugin’s possibilities below.
Supported Chart Elements:
Line Chart
Mixed Chart (Line/Area/Bar)
Heatmap Chart
Area Chart
Boxplot Chart
Treemap Chart
Bar Chart
Timeline Chart
Pie/Donut Chart
Candlestick Chart
Range Area Chart
Radar Chart
Radial Chart
Bubble Chart
Scutter Chart
Polar Chart
Waterfall Chart
Funnel 1D Chart
Funnel 2D Chart
Sankey Chart
Supported chart types:
1. Line Chart
2. Line Chart (multiple series)
3. Stacked Line Chart (multiple series)
4. Straight Line Chart
5. Smoothed Line Chart
6. Stepped Line Chart
7. Straight Line Chart (multiple series)
8. Smoothed Line Chart (multiple series)
9. Stepped Line Chart (multiple series)
10. Dashed Line Chart
11. Dashed Line Chart (multiple series)
12. Line Chart with forecast
13. Line Chart with forecast (multiple series)
14. Single axis Line Chart
15. Double axis Line Chart
16. Single axis Line Chart (multiple series)
17. Double axis Line Chart (multiple series)
18. Triple axis Line Chart (multiple series)
19. Annotated Line Chart
20. Annotated Line Chart (multiple series)
21. Synchronized Line Charts
22. Synchronized Line Charts (multiple series)
23. Area Chart
24. Area Chart (multiple series)
25. Stacked Area Chart (multiple series)
26. Straight Area Chart
27. Smoothed Area Chart
28. Stepped Area Chart
29. Straight Area Chart (multiple series)
30. Smoothed Area Chart (multiple series)
31. Stepped Area Chart (multiple series)
32. Dashed Area Chart
33. Dashed Area Chart (multiple series)
34. Area Chart with forecast
35. Area Chart with forecast (multiple series)
36. Single axis Area Chart
37. Double axis Area Chart
38. Single axis Area Chart (multiple series)
39. Double axis Area Chart (multiple series)
40. Triple axis Area Chart (multiple series)
41. Annotated Area Chart
42. Annotated Area Chart (multiple series)
43. Synchronized Area Charts
44. Synchronized Area Charts (multiple series)
45. Bar Chart
46. Bar Chart (multiple series)
47. Stacked Bar Chart (multiple series)
48. 100% Stacked Bar Chart (multiple series)
49. Vertical Stacked Bar Chart (multiple series)
50. Horizontal Stacked Bar Chart (multiple series)
51. Vertical 100% Stacked Bar Chart (multiple series)
52. Horizontal 100% Stacked Bar Chart (multiple series)
53. Single axis Bar Chart
54. Double axis Bar Chart
55. Single axis Bar Chart (multiple series)
56. Double axis Bar Chart (multiple series)
57. Triple axis Bar Chart (multiple series)
58. Annotated Bar Chart
59. Annotated Bar Chart (multiple series)
60. Synchronized Bar Charts
61. Synchronized Bar Charts (multiple series)
62. Heatmap Chart
63. Heatmap Chart (multiple series)
64. Monochrome Heatmap Chart
65. Monochrome Heatmap Chart (multiple series)
66. Multicolor Heatmap Chart (multiple series)
67. Color ranged Heatmap Chart
68. Color ranged Heatmap Chart (multiple series)
69. Single axis Heatmap Chart
70. Double axis Heatmap Chart
71. Single axis Heatmap Chart (multiple series)
72. Double axis Heatmap Chart (multiple series)
73. Annotated Heatmap Chart
74. Annotated Heatmap Chart (multiple series)
75. Treemap Chart
76. Treemap Chart (multiple series)
77. Monochrome Treemap Chart
78. Monochrome Treemap Chart (multiple series)
79. Multicolor Treemap Chart (multiple series)
80. Color ranged Treemap Chart
81. Color ranged Treemap Chart (multiple series)
82. Pie Chart
83. Monochrome Pie Chart
84. Multicolor Pie Chart
85. Semi Pie Chart
86. Donut Chart
87. Monochrome Donut Chart
88. Multicolor Donut Chart
89. Semi Donut Chart
90. Radar Chart
91. Radar Chart (multiple series)
92. Radial Chart
93. Monochrome Radial Chart
94. Multicolor Radial Chart
95. Semi Radial Chart
96. Semi Monochrome Radial Chart
97. Semi Multicolor Radial Chart
98. Bubble Chart
99. Bubble Chart (multiple series)
100. Single axis Bubble Chart
101. Double axis Bubble Chart
102. Single axis Bubble Chart (multiple series)
103. Double axis Bubble Chart (multiple series)
104. Annotated Bubble Chart
105. Annotated Bubble Chart (multiple series)
106. Scatter Chart
107. Scatter Chart (multiple series)
108. Single axis Scatter Chart
109. Double axis Scatter Chart
110. Single axis Scatter Chart (multiple series)
111. Double axis Scatter Chart (multiple series)
112. Annotated Scatter Chart
113. Annotated Scatter Chart (multiple series)
114. Polar Chart
115. Monochrome Polar Chart
116. Multicolor Polar Chart
117. Waterfall Chart
118. Single axis Waterfall Chart
119. Double axis Waterfall Chart
120. Annotated Waterfall Chart
121. Horizontal 1D Funnel Chart
122. Vertical 1D Funnel Chart
123. Horizontal 2D Funnel Chart
124. Vertical 2D Funnel Chart
125. Horizontal Sankey Chart
126. Vertical Sankey Chart
127. BoxPlot Chart
128. BoxPlot Chart with Scatter
129. Single axis BoxPlot Chart
130. Single axis BoxPlot Chart with Scatter
131. Double axis BoxPlot Chart
132. Double axis BoxPlot Chart with Scatter
133. Candlestick Chart
134. Single axis Candlestick Chart
135. Double axis Candlestick Chart
136. Mixed Chart (single series)
137. Mixed Chart (multiple series) [Line/Area/Bar]
138. Straight Mixed Chart [for Line/Area]
139. Smoothed Mixed Chart [for Line/Area]
140. Stepped Mixed Chart [for Line/Area]
141. Straight Mixed Chart (multiple series) [for Line/Area]
142. Smoothed Mixed Chart (multiple series) [for Line/Area]
143. Stepped Mixed Chart (multiple series) [for Line/Area]
144. Dashed Mixed Chart [for Line/Area]
145. Dashed Mixed Chart (multiple series) [for Line/Area]
146. Mixed Chart with forecast
147. Mixed Chart with forecast (multiple series)
148. Single axis Mixed Chart
149. Double axis Mixed Chart
150. Single axis Mixed Chart (multiple series)
151. Double axis Mixed Chart (multiple series)
152. Triple axis Mixed Chart (multiple series)
153. Synchronized Mixed Charts
154. Synchronized Mixed Charts (multiple series)
155. Range Area Chart
156. Range Area Chart (multiple series)
157. Stacked Range Area Chart (multiple series)
158. Straight Range Area Chart
159. Smoothed Range Area Chart
160. Stepped Range Area Chart Straight
161. Range Area Chart (multiple series)
162. Smoothed Range Area Chart (multiple series)
163. Stepped Range Area Chart (multiple series)
164. Dashed Range Area Chart
165. Dashed Range Area Chart (multiple series)
166. Single axis Range Area Chart
167. Double axis Range Area Chart
168. Single axis Range Area Chart (multiple series)
169. Double axis Range Area Chart (multiple series)
170. Triple axis Range Area Chart (multiple series)
171. Annotated Range Area Chart
172. Annotated Range Area Chart (multiple series)
173. Synchronized Range Area Charts
174. Synchronized Range Area Charts (multiple series)
175. Timeline Chart
176. Timeline Chart (multiple series)
177. Single axis Timeline Chart
178. Single axis Timeline Chart (multiple series)
179. Double axis Timeline Chart
180. Double axis Timeline Chart (multiple series)
181. Annotated Timeline Chart
182. Annotated Timeline Chart (multiple series)
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 Elements Properties
This plugin has 21 (twenty-one) visual elements which can be used on the page.
1. Line Chart
This element draws a line chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Stacked chart
Will stack all the series on the chart.
Checkbox
Stroke style
This option defines the style of the series points connection.
Dropdown
Stroke width
The connection line's width of the series.
number
Dashed width 1
If the value is more than 0 the connection points line for the 1st series will be dashed.
number
Dashed width 2
If the value is more than 0 the connection points line for the 2nd series will be dashed.
number
Dashed width 3
If the value is more than 0 the connection points line for the 3rd series will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the connection points line.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Dropshadow color
The color of the shadow. Default color: #000000.
Color (optional)
Dropshadow offset from the top
The top offset for shadow.
number
Dropshadow offset from the left
The left offset for shadow.
number
Dropshadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Marker shape
The shape of markers. If the "Show data labels" field is active then labels will overlap the markers.
Dropdown
Marker radius
The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Forecast data points
The number of ending data points you want to indicate as forecast or prediction values.
number
Forecast stroke width
The width of forecast connection points line of series.
number
Forecast fill opacity
The opacity for forecast connection points line of series.
number
Forecast dashed width
If the value is more than 0 the forecast connection points line will be dashed.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis lable count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
2nd Y-axis series name
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. If left blank - will not be displayed.
string (optional)
Show 2nd Y-axis border
This option allows showing the 2nd Y-axis border.
Checkbox
2nd Y-axis border-color
The color for the second Y-axis border.
Color
2nd Y-axis border size
The width of the 2nd Y-axis border. If the value is more than 0 the border will be displayed.
number
2nd Y-axis title
The title for the second Y-axis.
string (optional)
2nd Y-axis title color
The color for the second Y-axis title.
Color
Show 2nd Y-axis ticks
This option allows showing the 2nd Y-axis ticks.
Checkbox
2nd Y-axis ticks color
The color for the second Y-axis ticks.
Color
2nd Y-axis min value
The minimum value for the second Y-axis.
number (optional)
2nd Y-axis max value
The maximum value for the second Y-axis.
number (optional)
Show 2nd Y-axis labels
This option allows showing the 2nd Y-axis labels.
Checkbox
2nd Y-axis label count
The count of second Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
2nd Y-axis labels color
The color for the second Y-axis labels.
Color
2nd Y-axis labels prefix
Prefix for the 2nd Y-axis label.
string (optional)
2nd Y-axis labels the suffix
Suffix for the 2nd Y-axis label.
string (optional)
Enable 2nd Y-axis tooltip
This option shows a tooltip on the 2nd Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoom-In
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoom-Out
This option adds a zoom-out option to the chart toolbar.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Syncing ID
Fill in this field when you want to synchronize two charts. Create an ID and place it on the second chart in the same field. The ID should be the same for both charts. To correctly build the synced charts the count of the categories should be the same.
string (optional)
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Summed data labels on a stacked chart
Show data labels as the sum of current and below values. This will be applied just when the "Show data labels" and "Stacked chart" options are checked.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Dashed width 1
If the value is more than 0 the connection points line for the 1st series will be dashed.
number
Dashed width 2
If the value is more than 0 the connection points line for the 2nd series will be dashed.
number
Dashed width 3
If the value is more than 0 the connection points line for the 3rd series will be dashed.
number
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Value on click
Returns the Y-axis value when the chart is clicked.
number
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Series name on click
Returns the clicked series name.
string
Series name on hover
Returns the hovered series name.
string
2. Area Chart
This element draws an area chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Stacked chart
Will stack all the series on the chart.
Checkbox
Stroke style
This option defines the style of the series points connection.
Dropdown
Stroke width
The connection line's width of the series.
number
Dashed width
If the value is more than 0 the connection points line will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the connection points line.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Fill area to
When negative values are present in the Area chart, this option will fill the area with the background color either from 0 (origin) or from the end of the chart.
Dropdown
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding top
The top edge padding for the chart.
number
Chart padding bottom
The bottom edge padding for the chart.
number
Chart padding left
The left edge padding for the chart.
number
Chart padding right
The right edge padding for the chart.
number
Marker shape
The shape of markers. If the "Show data labels" field is active then labels will overlap the markers.
Dropdown
Marker radius
The radius of square markers. This will work if only the “square” option was selected from the “Marker shape” dropdown.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Forecast data points
The number of ending data points you want to indicate as forecast or prediction values.
number
Forecast stroke width
The width of forecast connection points line of series.
number
Forecast fill opacity
The opacity for forecast connection points line of series.
number
Forecast dashed width
If the value is more than 0 the forecast connection points line will be dashed.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
2nd Y-axis series name
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. If left blank - will not be displayed.
string (optional)
Show 2nd Y-axis border
This option allows showing the 2nd Y-axis border.
Checkbox
2nd Y-axis border color
The color for the second Y-axis border.
Color
2nd Y-axis border size
The width of the 2nd Y-axis border. If the value is more than 0 the border will be displayed.
number
2nd Y-axis title
The title for the second Y-axis.
string (optional)
2nd Y-axis title color
The color for the second Y-axis title.
Color
Show 2nd Y-axis ticks
This option allows showing the 2nd Y-axis ticks.
Checkbox
2nd Y-axis ticks color
The color for the second Y-axis ticks.
Color
2nd Y-axis min value
The minimum value for the second Y-axis.
number (optional)
2nd Y-axis max value
The maximum value for the second Y-axis.
number (optional)
Show 2nd Y-axis labels
This option allows showing the 2nd Y-axis labels.
Checkbox
2nd Y-axis label count
The count of second Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
2nd Y-axis labels color
The color for the second Y-axis labels.
Color
2nd Y-axis labels prefix
Prefix for the 2nd Y-axis label.
string (optional)
2nd Y-axis labels suffix
Suffix for the 2nd Y-axis label.
string (optional)
Enable 2nd Y-axis tooltip
This option shows a tooltip on the 2nd Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show category on tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Syncing ID
Fill in this field when you want to synchronize two charts. Create an ID and place it on the second chart in the same field. The ID should be the same for both charts. To correctly build the synced charts the count of the categories should be the same.
string (optional)
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset hover state on mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Summed data labels on stacked chart
Show data labels as the sum of current and below values. This will be applied just when the "Show data labels" and "Stacked chart" options are checked.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Value on click
Returns the Y-axis value when the chart is clicked.
number
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Series name on click
Returns the clicked series name.
string
Series name on hover
Returns the hovered series name.
string
3. Bar Chart
This element draws a bar chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Horizontal chart
This option allows for creating a horizontal bar chart.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels position
The position of the label on the bar.
Dropdown
Data labels orientation
The data label orientation.
Dropdown
Stacked chart
Will stack all the series on the chart.
Checkbox
Stacked chart in %
This option allows to conversion of stacked chart data into percentages chart.
Checkbox
Bar width (%)
The size of the bar in percentages relates to two adjacent grid lines.
number
Stroke width
The stroke width of the bar.
number
Stroke dashed width
If the value is more than 0 the stroke will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the bars.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Dropshadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding top
The top edge padding for the chart.
number
Chart padding bottom
The bottom edge padding for the chart.
number
Chart padding left
The left edge padding for the chart.
number
Chart padding right
The right edge padding for the chart.
number
Start range 1 value
The lower range 1 value. This value should be lower or equal with "End range value".
number (optional)
End range 1 value
The higher range 1 value. This value should be higher or equal with "Start range value".
number (optional)
Range 1 color
The color for bars that are in the indicated range 1.
Color
Start range 2 value
The lower range 2 value. This value should be lower or equal with "End range 2 value".
number (optional)
End range 2 value
The higher range 2 value. This value should be higher or equal with "Start range 2 value".
number (optional)
Range 2 color
The color for bars that are in the indicated range 2.
Color
Start range 3 value
The lower range 3 value. This value should be lower or equal with "End range 3 value".
number (optional)
End range 3 value
The higher range 3 value. This value should be higher or equal with "Start range 3 value".
number (optional)
Range 3 color
The color for bars that are in the indicated range 3.
Color
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
2nd Y-axis series name
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. If left blank - will not be displayed.
string (optional)
Show 2nd Y-axis border
This option allows showing the 2nd Y-axis border.
Checkbox
2nd Y-axis border color
The color for the second Y-axis border.
Color
2nd Y-axis border size
The width of the 2nd Y-axis border. If the value is more than 0 the border will be displayed.
number
2nd Y-axis title
The title for the second Y-axis.
string (optional)
2nd Y-axis title color
The color for the second Y-axis title.
Color
Show 2nd Y-axis ticks
This option allows showing the 2nd Y-axis ticks.
Checkbox
2nd Y-axis ticks color
The color for the second Y-axis ticks.
Color
2nd Y-axis min value
The minimum value for the second Y-axis.
number (optional)
2nd Y-axis max value
The maximum value for the second Y-axis.
number (optional)
Show 2nd Y-axis labels
This option allows showing the 2nd Y-axis labels.
Checkbox
2nd Y-axis label count
The count of second Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
2nd Y-axis labels color
The color for the second Y-axis labels.
Color
2nd Y-axis labels prefix
Prefix for the 2nd Y-axis label.
string (optional)
2nd Y-axis labels suffix
Suffix for the 2nd Y-axis label.
string (optional)
Enable 2nd Y-axis tooltip
This option shows a tooltip on the 2nd Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show category on tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Enable fixed tooltip
This option shows a tooltip in a certain place on the chart.
Checkbox
Fixed tooltip position
The place of the tooltip in the chart.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top right side of the chart. When enabled, data points will be displayed on the x-axis and does not allow the use of annotations. If disabled, x-axis tick marks will be displayed between data points and allow the use of annotations.
Checkbox
Enable download
This option adds a download option to the chart toolbar even if the "Enable toolbar" is disabled.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar, only if the "Enable toolbar" is enabled.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar, only if the "Enable toolbar" is enabled.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar, only if the "Enable toolbar" is enabled.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar, only if the "Enable toolbar" is enabled.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar, only if the "Enable toolbar" is enabled.
Checkbox
Syncing ID
Fill in this field when you want to synchronize two charts. Create an ID and place it on the second chart in the same field. The ID should be the same for both charts. To correctly build the synced charts the count of the categories should be the same.
string (optional)
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset hover state on mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Summed data labels on stacked chart
Show data labels as the sum of current and below values. This will be applied just when the "Show data labels" and "Stacked chart" options are checked.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Value on click
Returns the Y-axis value when the chart is clicked.
number
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Series name on click
Returns the clicked series name.
string
Series name on hover
Returns the hovered series name.
string
4. Mixed Chart (Line/Area/Bar)
This element draws a mixed chart.
Element Fields
Title
Description
Type
Series type 1
The type of chart for the 1st series.
Dropdown
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series type 2
The type of chart for the 2nd series.
Dropdown (optional)
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series type 3
The type of chart for the 3rd series.
Dropdown (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels position (bar)
The position of the label on the bar.
Dropdown
Data labels orientation (bar)
The data label orientation.
Dropdown
Bar width (%)
The size of the bar in percentages relates to two adjacent grid lines.
number
Stroke style
This option defines the style of the series points connection.
Dropdown
Stroke width
The width of the connecting line of the series or the stroke width of the bar type.
number
Dashed width
If the value is more than 0 the stroke will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the connection points line.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Fill area to
When negative values are present in the Area chart, this option will fill the area with the background color either from 0 (origin) or from the end of the chart.
Dropdown
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding top
The top edge padding for the chart.
number
Chart padding bottom
The bottom edge padding for the chart.
number
Chart padding left
The left edge padding for the chart.
number
Chart padding right
The right edge padding for the chart.
number
Marker shape
The shape of markers. If the "Show data labels" field is active then labels will overlap the markers.
Dropdown
Marker radius
The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Forecast data points
The number of ending data points you want to indicate as forecast or prediction values.
number
Forecast stroke width
The width of forecast connection points line of series.
number
Forecast fill opacity
The opacity for forecast connection points line of series.
number
Forecast dashed width
If the value is more than 0 the forecast connection points line will be dashed.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
2nd Y-axis series name
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. If left blank - will not be displayed.
string (optional)
Show 2nd Y-axis border
This option allows showing the 2nd Y-axis border.
Checkbox
2nd Y-axis border color
The color for the second Y-axis border.
Color
2nd Y-axis border size
The width of the 2nd Y-axis border. If the value is more than 0 the border will be displayed.
number
2nd Y-axis title
The title for the second Y-axis.
string (optional)
2nd Y-axis title color
The color for the second Y-axis title.
Color
Show 2nd Y-axis ticks
This option allows showing the 2nd Y-axis ticks.
Checkbox
2nd Y-axis ticks color
The color for the second Y-axis ticks.
Color
2nd Y-axis min value
The minimum value for the second Y-axis.
number (optional)
2nd Y-axis max value
The maximum value for the second Y-axis.
number (optional)
Show 2nd Y-axis labels
This option allows showing the 2nd Y-axis labels.
Checkbox
2nd Y-axis label count
The count of second Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
2nd Y-axis labels color
The color for the second Y-axis labels.
Color
2nd Y-axis labels prefix
Prefix for the 2nd Y-axis label.
string (optional)
2nd Y-axis labels suffix
Suffix for the 2nd Y-axis label.
string (optional)
Enable 2nd Y-axis tooltip
This option shows a tooltip on the 2nd Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show category on tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Syncing ID
Fill in this field when you want to synchronize two charts. Create an ID and place it on the second chart in the same field. The ID should be the same for both charts. To correctly build the synced charts the count of the categories should be the same.
string (optional)
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset hover state on mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series type 1
The type of chart for the 1st added series.
Dropdown
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series type 2
The type of chart for the 2nd added series.
Dropdown (optional)
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series type 3
The type of chart for the 3rd added series.
Dropdown (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Value on click
Returns the Y-axis value when the chart is clicked.
number
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Series name on click
Returns the clicked series name.
string
Series name on hover
Returns the hovered series name.
string
5. BoxPlot Chart
This element draws a boxplot chart.
Element Fields
Title
Description
Type
Minimum series data
These values represent the minimum Y-axis data for the boxplot series.
list of numbers
Q1 series data
These values represent the Q1 Y-axis data for the boxplot series.
list of numbers
Median series data
These values represent the median Y-axis data for the boxplot series.
list of numbers
Q3 series data
These values represent the Q3 Y-axis data for the boxplot series.
list of numbers
Maximum series data
These values represent the maximum Y-axis data for the boxplot series.
list of numbers
Scatter series data
These values represent Y-axis data for the scatter series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Stroke width
The stroke width of the boxplot series.
number
Dashed width
If the value is more than 0 the stroke will be dashed.
number
BoxPlot upward color
The color for the upward part of the boxplot series.
Color (optional)
BoxPlot downward color
The color for the downward part of the boxplot series.
Color (optional)
Scatter color
The color for the scatter series.
Color (optional)
Color style
This option defines how to color the boxplot chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color
The 2nd gradient color for the boxplot series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding top
The top edge padding for the chart.
number
Chart padding bottom
The bottom edge padding for the chart.
number
Chart padding left
The left edge padding for the chart.
number
Chart padding right
The right edge padding for the chart.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Reset hover state on mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
BoxPlot minimum value on click
Returns the minimum value of clicked boxplot item.
number
BoxPlot minimum value on hover
Returns the minimum value of hovered boxplot item.
number
BoxPlot Q1 value on click
Returns the Q1 value of clicked boxplot item.
number
BoxPlot Q1 value on hover
Returns the Q1 value of hovered boxplot item.
number
BoxPlot median value on click
Returns the median value of clicked boxplot item.
number
BoxPlot median value on hover
Returns the median value of hovered boxplot item.
number
BoxPlot Q3 value on click
Returns the Q3 value of clicked boxplot item.
number
BoxPlot Q3 value on hover
Returns the Q3 value of hovered boxplot item.
number
BoxPlot maximum value on click
Returns the maximum value of clicked boxplot item.
number
BoxPlot maximum value on hover
Returns the maximum value of hovered boxplot item.
number
Scatter value on click
Returns the value of clicked scatter item.
number
Scatter value on hover
Returns the value of hovered scatter item.
number
6. Candlestick Chart
This element draws a candlestick chart.
Element Fields
Title
Description
Type
Open series data
These values represent the open Y-axis data for the series.
list of numbers
High series data
These values represent the high Y-axis data for the series.
list of numbers
Low series data
These values represent the low Y-axis data for the series.
list of numbers
Close series data
These values represent the close Y-axis data for the series.
list of numbers
Series category
Values represent the X-axis data for all series. Provide date values in UNIX format.
list of numbers
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Date format
This option allows formatting provided category data.
Dropdown
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Stroke width
The stroke width of the candlestick.
number
Dashed width
If the value is more than 0 the stroke will be dashed.
number
Upward color
The color for upward values of the candlestick series.
Color (optional)
Downward color
The color for downward values of the candlestick series.
Color (optional)
Use fill color for wick
This option allows coloring the wick with the same color as the bar.
Checkbox
Color style
This option defines how to color the candlestick chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color
The 2nd gradient color for the candlestick series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Dropshadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding top
The top edge padding for the chart.
number
Chart padding bottom
The bottom edge padding for the chart.
number
Chart padding left
The left edge padding for the chart.
number
Chart padding right
The right edge padding for the chart.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from top
X-axis labels offset from the top
number
X-axis labels max height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Enable fixed tooltip
This option shows a tooltip in a certain place on the chart.
Checkbox
Fixed tooltip position
The place of the tooltip in the chart.
Dropdown
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Reset hover state on mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
date
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Open value on click
Returns the open value of clicked candlestick item.
number
Open value on hover
Returns the open value of hovered candlestick item.
number
High value on click
Returns the high value of clicked candlestick item.
number
High value on hover
Returns the high value of hovered candlestick item.
number
Low value on click
Returns the low value of clicked candlestick item.
number
Low value on hover
Returns the low value of hovered candlestick item.
number
Close value on click
Returns the close value of clicked candlestick item.
number
Close value on hover
Returns the close value of hovered candlestick item.
number
7. Timeline Chart
This element draws a timeline chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data type
The data type with "category", "start date" and "end date" characteristics.
App Type
Series 1 data
List of objects that contain all necessary information. The type of objects should be the same as selected in the "Series 1 data type" field.
list of App Type
Series 1 category field
Objects field that represents the category.
string field of App Type
Series 1 start date field
Objects field that represents the start date.
date field of App Type
Series 1 end date field
Objects field that represents the end date.
date field of App Type
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data type
The data type with "category", "start date" and "end date" characteristics.
App Type (optional)
Series 2 data
List of objects that contain all necessary information. The type of objects should be the same as selected in the "Series 2 data type" field.
list of App Types (optional)
Series 2 category field
Objects field that represents the category.
string field of App Type (optional)
Series 2 start date field
Objects field that represents the start date.
date field of App Type (optional)
Series 2 end date field
Objects field that represents the end date.
date field of App Type (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data type
The data type with "category", "start date" and "end date" characteristics.
App Type (optional)
Series 3 data
List of objects that contain all necessary information. The type of objects should be the same as selected in the "Series 3 data type" field.
list of App Types (optional)
Series 3 category field
Objects field that represents the category.
string field of App Type (optional)
Series 3 start date field
Objects field that represents the start date.
date field of App Type (optional)
Series 3 end date field
Objects field that represents the end date.
date field of App Type (optional)
Date format
This option allows formatting provided category data.
Dropdown
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Bar width (%)
The size of the bar in percentages relates to two adjacent grid lines.
number
Stroke width
The stroke width of the bar.
number
Stroke dashed width
If the value is more than 0 the stroke will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the timeline chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
This option allows drawing the background space between vertical grid lines.
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Enable fixed tooltip
This option shows a tooltip in a certain place on the chart.
Checkbox
Fixed tooltip position
The place of the tooltip in the chart.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new serie - This action is used to add new serie.
Fields:
Title
Description
Type
Serie name
Name for the new added serie. It should be unique.
text
Serie data type
The data type with "category", "start date" and "end date" characteristics.
App Type
Serie data
List of objects that contain all necessary information. The type of objects should be the same as selected in the "Serie data type" field.
list of App Type
Serie category field
Objects field that represents the category.
text field of App Type
Serie start date field
Objects field that represents the start date.
date field of App Type
Serie end date field
Objects field that represents the end date.
date field of App Type
Chart color
The color for the new serie. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color
The 2nd gradient color for the new serie. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent date value from the X-axis range. Provide date values in UNIX format.
number
X-value end
The second existent date value from the X-axis range. Provide date values in UNIX format.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis category.
string
Y-value end
The second existent value from the Y-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border radius
The border radius for label border.
number
Text color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent data value from the X-axis range. Provide date values in UNIX format.
number
Y-value
The existent label from the Y-axis category.
string
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border-radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Series name on click
Returns the clicked series name.
string
Label on click
Returns the Y-axis label when the chart is clicked.
string
Start date on click
Returns the start date for the clicked item.
date
End date on click
Returns the end date for the clicked item.
date
Series name on hover
Returns the hovered series name.
string
Label on hover
Returns the Y-axis label when the chart has hovered.
string
Start date on hover
Returns the start date for the hovered item.
date
End date on hover
Returns the end date for the hovered item.
date
PNG url
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
8. Range Area Chart
This element draws a range area chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series upward data 1
These values represent upward Y-axis data for the 1st series.
list of numbers
Series downward data 1
These values represent downward Y-axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series upward data 2
These values represent upward Y-axis data for the 2nd series.
list of numbers (optional)
Series downward data 2
These values represent downward Y-axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series upward data 3
These values represent upward Y-axis data for the 3rd series.
list of numbers (optional)
Series downward data 3
These values represent downward Y-axis data for the 3rd series.
list of numbers (optional)
Series Category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Stacked chart
Will stack all the series on the chart.
Checkbox
Stroke style
This option defines the style of the series points connection.
Dropdown
Stroke width
The connection line's width of the series.
number
Dashed width
If the value is more than 0 the connection points line will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Color style
This option defines how to color the range chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Marker shape
The shape of markers. If the "Show data labels" field is active then labels will overlap the markers.
Dropdown
Marker radius
The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
2nd Y-axis series name
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. If left blank - will not be displayed.
string (optional)
Show 2nd Y-axis border
This option allows showing the 2nd Y-axis border.
Checkbox
2nd Y-axis border-color
The color for the second Y-axis border.
Color
2nd Y-axis border size
The width of the 2nd Y-axis border. If the value is more than 0 the border will be displayed.
number
2nd Y-axis title
The title for the second Y-axis.
string (optional)
2nd Y-axis title color
The color for the second Y-axis title.
Color
Show 2nd Y-axis ticks
This option allows showing the 2nd Y-axis ticks.
Checkbox
2nd Y-axis ticks color
The color for the second Y-axis ticks.
Color
2nd Y-axis min value
The minimum value for the second Y-axis.
number (optional)
2nd Y-axis max value
The maximum value for the second Y-axis.
number (optional)
Show 2nd Y-axis labels
This option allows showing the 2nd Y-axis labels.
Checkbox
2nd Y-axis label count
The count of second Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
2nd Y-axis labels color
The color for the second Y-axis labels.
Color
2nd Y-axis labels prefix
Prefix for the 2nd Y-axis label.
string (optional)
2nd Y-axis labels the suffix
Suffix for the 2nd Y-axis label.
string (optional)
Enable 2nd Y-axis tooltip
This option shows a tooltip on the 2nd Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Syncing ID
Fill in this field when you want to synchronize two charts. Create an ID and place it on the second chart in the same field. The ID should be the same for both charts. To correctly build the synced charts the count of the categories should be the same.
string (optional)
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series upward data 1
These values represent upward Y-axis data for the 1st added series.
list of numbers
Series downward data 1
These values represent downward Y-axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series upward data 2
These values represent upward Y-axis data for the 2nd added series.
list of numbers (optional)
Series downward data 2
These values represent downward Y-axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series upward data 3
These values represent upward Y-axis data for the 3rd added series.
list of numbers (optional)
Series downward data 3
These values represent downward Y-axis data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border-radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Upward value on click
Returns the upward Y-axis value when the chart is clicked.
number
Downward value on click
Returns the downward Y-axis value when the chart is clicked.
number
Upward value on hover
Returns the upward Y-axis value when the chart has hovered.
number
Downward value on hover
Returns the downward Y-axis value when the chart has hovered.
number
9. Heatmap Chart
This element draws a heatmap chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent cell data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent cell data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent cell data for the 3rd series.
list of numbers (optional)
Series Category
Values represent the X-axis data for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels color
The color for the data labels.
Color
Show stroke
This option allows showing cell stroke.
Checkbox
Stroke color
The color for stroke.
Color
Stroke width
The stroke width of the cell.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Color style
This option defines how to color the heatmap cells.
Dropdown
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned. This color is used like a monochrome color if selected "Single color" from the "Color style" field.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Square radius
The border radius for heatmap cells.
number
Enable shades
This option allows to enable different shades of color depending on the value.
Checkbox
Shade intensity
The shade intensity. Accepted value from 0 to 1.
number
Reverse negative shade
This option allows reversing the shades for negatives but keeps the positive shades as it is now.
Checkbox
Range 1 name
The name for the first range of value.
string (optional)
Range color 1
The color for the first range of values.
Color (optional)
Range value 1 from
The start value of the first range.
number (optional)
Range value 1 to
The end value of the first range.
number (optional)
Range 2 name
The name for the second range of value.
string (optional)
Range color 2
The color for the second range of values.
Color (optional)
Range value 2 from
The start value of the second range.
number (optional)
Range value 2 to
The end value of the second range.
number (optional)
Range 3 name
The name for the third range of value.
string (optional)
Range color 3
The color for the third range of values.
Color (optional)
Range value 3 from
The start value of the third range.
number (optional)
Range value 3 to
The end value of the third range.
number (optional)
Range 4 name
The name for the fourth range of value.
string (optional)
Range color 4
The color for the fourth range of values.
Color (optional)
Range value 4 from
The start value of the fourth range.
number (optional)
Range value 4 to
The end value of the fourth range.
number (optional)
Range 5 name
The name for the fifth range of value.
string (optional)
Range color 5
The color for the fifth range of values.
Color (optional)
Range value 5 from
The start value of the fifth range.
number (optional)
Range value 5 to
The end value of the fifth range.
number (optional)
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent cell data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent cell data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent cell data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG URL is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Series name on click
Returns the clicked series name.
string
Value on click
Returns the Y-axis value when the chart is clicked.
number
Series name on hover
Returns the hovered series name.
string
Value on hover
Returns the Y-axis value when the chart has hovered.
number
10. Treemap Chart
This element draws a treemap chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 labels
These values represent the text that will be displayed on chart cells for the 1st series.
list of strings
Series 1 data
These values represent cell data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 labels
These values represent the text that will be displayed on chart cells for the 2nd series.
list of strings (optional)
Series 2 data
These values represent cell data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 labels
These values represent the text that will be displayed on chart cells for the 3rd series.
list of strings (optional)
Series 3 data
These values represent cell data for the 3rd series.
list of numbers (optional)
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels color
The color for the data labels.
Color
Display values with labels
This option allows displaying both the label with value.
Checkbox
Labels offset from the top
The top offset for the data label.
number
Stroke color
The color for stroke.
Color
Stroke width
The stroke width of the cell.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Color style
This option defines how to color the treemap cells.
Dropdown
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned. This color is used like a monochrome color if selected "Single color" from the "Color style" field.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Enable shades
This option allows to enable different shades of color depending on the value.
Checkbox
Shade intensity
The shade intensity. Accepted value from 0 to 1.
number
Reverse negative shade
This option allows reversing the shades for negatives but keeps the positive shades as it is now.
Checkbox
Range color 1
The color for the first range of values.
Color (optional)
Range value 1 from
The start value of the first range.
number (optional)
Range value 1 to
The end value of the first range.
number (optional)
Range color 2
The color for the second range of values.
Color (optional)
Range value 2 from
The start value of the second range.
number (optional)
Range value 2 to
The end value of the second range.
number (optional)
Range color 3
The color for the third range of values.
Color (optional)
Range value 3 from
The start value of the third range.
number (optional)
Range value 3 to
The end value of the third range.
number (optional)
Range color 4
The color for the fourth range of values.
Color (optional)
Range value 4 from
The start value of the fourth range.
number (optional)
Range value 4 to
The end value of the fourth range.
number (optional)
Range color 5
The color for the fifth range of values.
Color (optional)
Range value 5 from
The start value of the fifth range.
number (optional)
Range value 5 to
The end value of the fifth range.
number (optional)
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 labels
These values represent the text that will be displayed on chart cells for the 1st added series.
list of strings
Series 1 data
These values represent cell data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 labels
These values represent the text that will be displayed on chart cells for the 2nd added series.
list of strings (optional)
Series 2 data
These values represent cell data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 labels
These values represent the text that will be displayed on chart cells for the 3rd added series.
list of strings (optional)
Series 3 data
These values represent cell data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Label on click
Returns the X-axis label when the chart is clicked.
string
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Series name on click
Returns the clicked series name.
string
Value on click
Returns the Y-axis value when the chart is clicked.
number
Series name on hover
Returns the hovered series name.
string
Value on hover
Returns the Y-axis value when the chart has hovered.
number
11. Pie/Donut Chart
This element draws a pie/donut chart.
Element Fields
Title
Description
Type
Series labels
These values represent the text that will be assigned for the pie/donut slice. If not specified, the default values will be assigned.
list of strings (optional)
Series data
These values represent data for the pie/donut slices.
list of numbers
Chart type
The chart type.
Dropdown
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Start angle
A custom angle from which the pie/donut slices should start.
number
End angle
A custom angle to which the pie/donut slices should end.
number
Expand on click
This option allows slice expansion to make it distinguished visually when clicked on it.
Checkbox
Inner donut size
The donut size in percentages relative to the total pie area. Accepted value from 10 to 90.
number
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels color
The color for the data labels.
Color
Labels data
The data is to be displayed on the chart segment.
Dropdown
Labels offset from the top
The top offset for the data label.
number
Stroke color
The color for stroke.
Color
Stroke width
The stroke width of the cell.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Color style
This option defines how to color the chart.
Dropdown
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned. This color is used like a monochrome color if selected "Single color" from the "Color style" field.
Color (optional)
Chart color 2
The color for the 2nd slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 4
The color for the 4th slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 5
The color for the 5th slice. If it is not specified, the default color will be assigned.
Color (optional)
Show name
This option allows displaying the slice label on the center of the donut when it has hovered.
Checkbox
Name size
The slice label size.
number
Name color
The slice label color.
Color
Name offset
The top offset for the slice label.
number
Show value
This option allows displaying the slice data on the center of the donut when it has hovered.
Checkbox
Value size
The slice value size.
number
Value color
The slice value color.
Color
Value offset
The top offset for slice value.
number
Show total value
This option allows displaying the total value on the center of the donut.
Checkbox
Show total value always
This option allows displaying the total value on the center of the donut even if the slice of the donut has hovered.
Checkbox
Total value label
Customizable text for the total value.
string
Total value size
The total value size.
number
Total value color
The total value color.
Color
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Generate PNG URL - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Label on click
Returns the slice label when the chart is clicked.
string
Label on hover
Returns the slice label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Value on click
Returns the slice value when the chart is clicked.
number
Value on hover
Returns the slice value when the chart has hovered.
number
12. Radar Chart
This element draws a radar chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
string
Series 1 data
These values represent axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
string (optional)
Series 2 data
These values represent axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
string (optional)
Series 3 data
These values represent axis data for the 3rd series.
list of numbers (optional)
Series category
Values, to represent the radar labels for all series.
list of strings
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Stroke width
The connection line's width of the series.
number
Dashed width
If the value is more than 0 the connection points line will be dashed.
number
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Fill opacity
The opacity of series shape. Accepted value from 0 to 1.
number
Color style
This option defines how to color the series shape.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Polygon stroke color
The color for the lines of the background polygon.
Color
Polygon fill color 1
The first color polygon space between lines.
Color
Polygon fill color 2
The second color polygon space between lines.
Color
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Marker shape
The shape of markers. If the "Show data labels" field is active then labels will overlap the markers.
Dropdown
Marker radius
The radius of square markers. This will work if only the “square” option were selected from the “Marker shape” dropdown.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Replace null/undefined values with 0
This option allows to replacement of all "null" or "undefined" values from provided data.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
string
Series 1 data
These values represent axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
string (optional)
Series 2 data
These values represent axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
string (optional)
Series 3 data
These values represent axis data for the 3rd added series.
list of numbers (optional)
Chart color 1
The color for the 1st added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 2
The color for the 2nd added series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd added series. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG URL is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the axis label when the chart is clicked.
number
Index on hover
Returns the index of the axis label when the chart has hovered.
number
Label on hover
Returns the axis label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Series names
Returns the list of all series names that are present on the chart.
list of strings
Value on click
Returns the axis value when the chart is clicked.
number
Value on hover
Returns the axis value when the chart has hovered.
number
Series name on click
Returns the clicked series name.
string
Series name on hover
Returns the hovered series name.
string
13. Radial Chart
This element draws a radial chart.
Element Fields
Title
Description
Type
Series labels
These values represent the text that will be assigned for circles. If not specified, the default values will be assigned.
list of strings (optional)
Series data
These values represent data for the circle. Accepted values from 0 to 100. If the provided value is greater than 100 then will be displayed a completed circle.
list of numbers
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Inverse order
This option allows displaying of circles in inverse order.
Checkbox
Start angle
A custom angle from which the chart should start.
number
End angle
A custom angle to which the chart should end.
number
Hollow size
The inner space in percentages relative to the total available size of the chart. Accepted value from 10 to 90.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Color style
This option defines how to color the chart.
Dropdown
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned. This color is used like a monochrome color if selected "Single color" from the "Color style" field.
Color (optional)
Chart color 2
The color for the 2nd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 4
The color for the 4th series. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 5
The color for the 5th series. If it is not specified, the default color will be assigned.
Color (optional)
Show track
This option allows to display the path for the circle.
Checkbox
Track color
The color for the track.
Color
Track opacity
The opacity for the track. Accepted values from 0 to 1.
number
Track drop shadow
Allow drawing drop shadow for the track.
Checkbox
Track drop shadow top
The top offset for shadow.
number
Track drop shadow left
The left offset for shadow.
number
Track drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Track drop shadow blur
The blur distance for shadow.
number
Show name
This option allows displaying of the label on the center of the chart when it has hovered.
Checkbox
Name size
The label size.
number
Name color
The label color.
Color
Name offset
The top offset for the label.
number
Show value
This option allows displaying of the data on the center of the chart when it has hovered.
Checkbox
Value size
The value size.
number
Value color
The value color.
Color
Value offset
The top offset for value.
number
Show total value
This option allows displaying of the total value at the center of the chart.
Checkbox
Total value label
Customizable text for the total value.
string
Total value size
The total value size.
number
Total value color
The total value color.
Color
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Show label - This action is used to show specific labels on the chart.
Fields:
Title
Description
Type
Label name
The label is to be displayed.
string
Hide label - This action is used to hide specific labels on the chart.
Fields:
Title
Description
Type
Label name
The label that is shown.
string
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG URL is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Label on hover
Returns the label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Value on click
Returns the value when the chart is clicked.
number
Value on hover
Returns the value when the chart has hovered.
number
14. Bubble Chart
This element draws a bubble chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
text
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series 1 radius data
These values represent the size of the bubble for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
text (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series 2 radius data
These values represent the size of the bubble for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
text (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series 3 radius data
These values represent the size of the bubble for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series. This type of chart supports list of texts that will be automatically converted to date and number values only.
list of texts
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Minimum marker size
The minimum size for the bubble. If provided radius data is smaller, the size will be forced to this value.
number (optional)
Maximum marker size
The maximum size for the bubble. If provided radius data is greater, the size will be forced to this value.
number (optional)
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Color style
This option defines how to color the chart.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. It doesn’t have any effect if categories are dates. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Z-axis title
The customizable text for bubble size data.
string
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
text
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series 1 radius data
These values represent the size of the bubble for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
text (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series 2 radius data
These values represent the size of the bubble for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
text (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Series 3 radius data
These values represent the size of the bubble for the 3rd added series.
list of numbers (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border-radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
text
Series names
Returns the list of all series names that are present on the chart.
list of texts
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Radius value on click
Returns the bubble size value when the chart is clicked.
number
Radius value on hover
Returns the bubble size value when the chart has hovered.
number
Label on click
Returns the X-axis label when the chart is clicked.
text
Label on hover
Returns the X-axis label when the chart has hovered.
text
Serie name on click
Returns the clicked serie name.
text
Serie name on hover
Returns the hovered serie name.
text
15. Scatter Chart
This element draws a scatter chart.
Element Fields
Title
Description
Type
Series 1 name
Name for the 1st series. It should be unique.
text
Series 1 data
These values represent Y-axis data for the 1st series.
list of numbers
Series 2 name
Name for the 2nd series. It should be unique.
text (optional)
Series 2 data
These values represent Y-axis data for the 2nd series.
list of numbers (optional)
Series 3 name
Name for the 3rd series. It should be unique.
text (optional)
Series 3 data
These values represent Y-axis data for the 3rd series.
list of numbers (optional)
Series category
Values represent the X-axis data for all series. This type of chart supports list of texts that will be automatically converted to date and number values only.
list of texts
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Marker size
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 size on hover
The marker size on hover.
number
Marker color 1
The color for the 1st series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker fill opacity
The opacity for markers. Accepted values from 0 to 1.
number
Color style
This option defines how to color the chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Gradient color 1
The 2nd gradient color for the 1st series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown.
Color (optional)
Marker stroke color 1
The color for the 1st series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke width
The width of markers stroke.
number
Marker stroke opacity
The opacity for markers stroke. Accepted values from 0 to 1.
number
Marker stroke dashed width
If the value is more than 0 the markers stroke will be dashed.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis label count
The count of X-axis labels. It doesn’t have any effect if categories are dates. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend. Need at least 2 series for displaying the legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a toolbar to the top-right side of the chart.
Checkbox
Enable download
This option adds a download option to the chart toolbar.
Checkbox
Enable zoom
This option adds a zoom option to the chart toolbar.
Checkbox
Zoom selection color
The color for the zoom square.
Color
Zoom selection opacity
The opacity of zoom square. Accept the value from 0 to 1.
number
Zoom selection stroke width
The width of the zoom square stroke.
number
Zoom selection stroke color
The color of the zoom square stroke.
Color
Zoom selection stroke opacity
The opacity of zoom square stroke. Accept the value from 0 to 1.
number
Enable zoomIn
This option adds a zoom-in option to the chart toolbar.
Checkbox
Enable zoomOut
This option adds a zoom-out option to the chart toolbar.
Checkbox
Auto scale Y-axis on zoom
This option allows scaling the Y-axis values on zoom.
Checkbox
Enable pan
This option adds a pan option to the chart toolbar.
Checkbox
Enable reset
This option adds a reset option to the chart toolbar.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Append new series - This action is used to add up to 3 new series.
Fields:
Title
Description
Type
Series 1 name
Name for the 1st added series. It should be unique.
text
Series 1 data
These values represent Y-axis data for the 1st added series.
list of numbers
Series 2 name
Name for the 2nd added series. It should be unique.
text (optional)
Series 2 data
These values represent Y-axis data for the 2nd added series.
list of numbers (optional)
Series 3 name
Name for the 3rd added series. It should be unique.
text (optional)
Series 3 data
These values represent Y-axis data for the 3rd added series.
list of numbers (optional)
Marker color 1
The color for the 1st added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 2
The color for the 2nd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Marker color 3
The color for the 3rd added series markers. If it is not specified, the default color will be assigned.
Color (optional)
Gradient color 1
The 2nd gradient color for the 1st added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 2
The 2nd gradient color for the 2nd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Gradient color 3
The 2nd gradient color for the 3rd added series. If it is not specified, the default color will be assigned. It will be applied if only the “gradient” option was selected from the “Color style” dropdown from the element.
Color (optional)
Marker stroke color 1
The color for the 1st added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 2
The color for the 2nd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Marker stroke color 3
The color for the 3rd added series markers stroke. If it is not specified, the default color will be assigned.
Color (optional)
Show series - This action is used to show specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that will be shown.
string
Hide series - This action is used to hide specific series on the chart.
Fields:
Title
Description
Type
Series name
The series name that is shown.
string
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border-radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
text
Series names
Returns the list of all series names that are present on the chart.
list of texts
Value on hover
Returns the Y-axis value when the chart has hovered.
number
Label on click
Returns the X-axis label when the chart is clicked.
text
Label on hover
Returns the X-axis label when the chart has hovered.
text
Serie name on click
Returns the clicked serie name.
text
Serie name on hover
Returns the hovered serie name.
text
16. Polar Chart
This element draws a polar chart.
Element Fields
Title
Description
Type
Series labels
These values represent the text that will be assigned for the slice of the chart.
list of strings (optional)
Series data
These values represent data for a slice of the chart.
list of numbers
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Chart rings color
The color for background rings and lines.
Color
Chart rings width
The size for background rings.
number
Stroke color
The color for the stroke of slices.
Color
Stroke width
The width of the stroke of slices.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Color style
This option defines how to color the chart.
Dropdown
Chart color 1
The color for the 1st series. If it is not specified, the default color will be assigned. This color is used like a monochrome color if selected "Single color" from the "Color style" field.
Color (optional)
Chart color 2
The color for the 2nd slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 3
The color for the 3rd slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 4
The color for the 4th slice. If it is not specified, the default color will be assigned.
Color (optional)
Chart color 5
The color for the 5th slice. If it is not specified, the default color will be assigned.
Color (optional)
Show name
This option allows displaying the slice label on the center of the donut when it has hovered.
Checkbox
Name size
The slice label size.
number
Name color
The slice label color.
Color
Name offset
The top offset for the slice label.
number
Show value
This option allows displaying the slice data on the center of the donut when it has hovered.
Checkbox
Value size
The slice value size.
number
Value color
The slice value color.
Color
Value offset
The top offset for slice value.
number
Show total value
This option allows displaying the total value on the center of the donut.
Checkbox
Show total value always
This option allows displaying the total value on the center of the donut even if the slice of the donut has hovered.
Checkbox
Total value label
Customizable text for the total value.
string
Total value size
The total value size.
number
Total value color
The total value color.
Color
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Show legend
This option adds a chart legend.
Checkbox
Legend position
Place of the legend related to the chart.
Dropdown
Horizontal legend alignment
Horizontal alignment of legend.
Dropdown
Legend font size
The size for the legend text.
number
Color legend labels
This option colors the labels of legend in series' colors.
Checkbox
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Label on hover
Returns the label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Value on click
Returns the value when the chart is clicked.
number
Value on hover
Returns the value when the chart has hovered.
number
17. Waterfall Chart
This element draws a waterfall chart.
Element Fields
Title
Description
Type
Series name
Name for the series. It should be unique.
string
Series data
These values represent the Y-axis data for the series.
list of numbers
Series Category
Values, to represent the X-axis data for series.
list of strings
Include total value
This option allows to add total value bar as the last item in the series.
Checkbox
Label text for a total value
The customizable title for the total value.
string
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Enable sparkline
This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas.
Checkbox
Show data labels
Show or hide data labels on the chart.
Checkbox
Data labels position
The position of the label on the bar.
Dropdown
Data labels orientation
The data label orientation.
Dropdown
Bar width (%)
The size of the bar in percentages relates to two adjacent grid lines.
number
Stroke width
The stroke width of the bar.
number
Stroke color
The color for stroke.
Color
Color downward data differently
This option allows coloring the negative values with different colors.
Checkbox
Upward color
The color for positive values if the "Color downward data differently" option is selected. If not provided, will be assigned the default color. This color is used for all series if the "Color downward data differently" option is not selected.
Color (optional)
Downward color
The color for negative values if the "Color downward data differently" option is selected. If not provided, will be assigned the default color.
Color (optional)
Color style
This option defines how to color the chart.
Dropdown
Gradient type
This dropdown defines the gradient direction. This will work if only the “gradient” option was selected from the “Color style” dropdown.
Dropdown
Upward gradient color
The 2nd gradient color for positive values if the "Color downward data differently" option is selected. If not provided, will be assigned the default color.
Color (optional)
Downward gradient color
The 2nd gradient color for negative values if the "Color downward data differently" option is selected. If not provided, will be assigned the default color.
Color (optional)
Gradient opacity from
The opacity for the 1st gradient color.
number
Gradient opacity to
The opacity for the 2nd gradient color.
number
Enable drop shadow
Draws a drop shadow for the series. Do not forget to set values for the "Dropshadow offset from the top" and "Dropshadow offset from the left" fields.
Checkbox
Drop shadow color
The color of the shadow. Default color: #000000.
Color (optional)
Drop shadow offset from the top
The top offset for shadow.
number
Drop shadow offset from the left
The left offset for shadow.
number
Drop shadow blur
The blur distance for shadow.
number
Drop shadow opacity
The opacity for shadow. Accepted values from 0 to 1.
number
Chart padding-top
The top edge padding for the chart.
number
Chart padding-bottom
The bottom edge padding for the chart.
number
Chart padding-left
The left edge padding for the chart.
number
Chart padding-right
The right edge padding for the chart.
number
Enable grid lines for X-axis
This option allows displaying vertical grid lines.
Checkbox
Enable grid lines for Y-axis
This option allows displaying horizontal grid lines.
Checkbox
Grid line color
The color of grid lines.
Color
Grid stroke dashed width
If the value is more than 0 the grid lines will be dashed.
number
Enable grid column color
This option allows drawing the background space between vertical grid lines.
Checkbox
Odd column color
The first vertical color. This color will be used to draw the odd color position.
Color
Even column color
The second vertical color. This color will be used to draw the even color position.
Color
Column color opacity
The opacity for vertical colors. Accepted values from 0 to 1.
number
Enable grid row color
This option allows drawing the background space between horizontal grid lines.
Checkbox
Odd row color
The first horizontal color. This color will be used to draw the odd color position.
Color
Even row color
The second horizontal color. This color will be used to draw the even color position.
Color
Row color opacity
The opacity for horizontal colors. Accepted values from 0 to 1.
number
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show X-axis border
This option allows showing an X-axis border.
Checkbox
X-axis border-color
The color of the X-axis border.
Color
X-axis border size
The width of the X-axis border. If the value is more than 0 the border will be displayed.
number
X-axis title
The title for X-axis.
string (optional)
X-axis title color
The color for the X-axis title.
Color
X-axis title size
The size for the X-axis title.
number
X-axis title offset from the top
The top offset for the X-axis title.
number
X-axis title offset from the left
The left offset for the X-axis title.
number
Show X-axis ticks
This option allows showing the X-axis ticks.
Checkbox
X-axis ticks color
The color for the X-axis ticks.
Color
X-axis ticks height
The size for the X-axis ticks.
number
Show X-axis labels
This option allows showing the X-axis labels.
Checkbox
X-axis labels color
The color for the X-axis labels.
Color
X-axis labels size
The size for the X-axis labels.
number
X-axis labels offset from the top
The top offset for the X-axis labels.
number
X-axis labels max-height
The max height for the X-axis labels when they are rotated.
number
Hide overlapping X-axis
This option allows hiding some of the X-axis labels if they overlap others.
Checkbox
Trim X-axis labels
This option trims the label if it’s too long and adds “...” to its end.
Checkbox
Rotate X-axis labels
This option rotates labels if they are too long.
Checkbox
Always rotate X-axis labels
This option rotates labels permanently.
Checkbox
X-axis labels rotation angle
The angle for the rotation of the label. Accepted negative values.
number
Enable X-axis tooltip
This option shows a tooltip on X-axis on hover.
Checkbox
X-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
X-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
X-axis crosshair color
The color for the crosshair line.
Color
Show Y-axis border
This option allows showing the Y-axis border.
Checkbox
Y-axis border-color
The color of the Y-axis border.
Color
Y-axis border size
The width of the Y-axis border. If the value is more than 0 the border will be displayed.
number
Y-axis title
The title for Y-axis.
string (optional)
Y-axis title color
The color for the Y-axis title.
Color
Y-axis title size
The size for the Y-axis title.
number
Y-axis title offset from the top
The top offset for the Y-axis title.
number
Y-axis title offset from the left
The left offset for the Y-axis title.
number
Show Y-axis ticks
This option allows showing the Y-axis ticks.
Checkbox
Y-axis ticks color
The color for the Y-axis ticks.
Color
Y-axis ticks width
The size for the Y-axis ticks.
number
Y-axis min value
The minimum value for Y-axis.
number (optional)
Y-axis max value
The maximum value for Y-axis.
number (optional)
Show Y-axis labels
This option allows showing the Y-axis labels.
Checkbox
Y-axis label count
The count of Y-axis labels. Using a value that is less than half of the count of initial labels is recommended for displaying fewer values.
number (optional)
Y-axis labels color
The color for the Y-axis labels.
Color
Y-axis labels size
The size for the Y-axis labels.
number
Y-axis labels prefix
Prefix for the Y-axis label.
string (optional)
Y-axis labels suffix
Suffix for the Y-axis label.
string (optional)
Enable Y-axis tooltip
This option shows a tooltip on Y-axis on hover.
Checkbox
Y-axis crosshair width
The size for the crosshair. If the value is more than 0 the crosshair will be displayed.
number
Y-axis crosshair dashed width
If the value is more than 0 the crosshair line will be dashed.
number
Y-axis crosshair color
The color for the crosshair line.
Color
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Show the category on the tooltip
This option allows showing the X-axis data in the tooltip.
Checkbox
Tooltip theme
The tooltip theme.
Dropdown
Enable fixed tooltip
This option shows a tooltip in a certain place on the chart.
Checkbox
Fixed tooltip position
The place of the tooltip in the chart.
Dropdown
Enable toolbar
This option adds a download option to the top-right side of the chart.
Checkbox
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Actions
Add X-Axis annotation - This action is used to add the X-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value start
The existent label from the X-axis category.
string
X-value end
The second existent label from the X-axis category.
string (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "X-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "X-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "X-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Label orientation
The orientation for the label.
Dropdown
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Y-Axis annotation - This action is used to add the Y-axis annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
Y-value start
The existent value from the Y-axis range.
number
Y-value end
The second existent value from the Y-axis range.
number (optional)
Label text
The text, which represents the annotation.
string
Border color
The color of annotation edges. If the "Y-value end" is not provided this color will be used to color the line.
Color
Border dashed width
If the value is bigger than 0 the edges or line will be dashed.
number
Range color fill
The color for filling the range between both provided "Y-value..."s.
Color
Range color fill opacity
The opacity of the range between both provided "Y-value..."s. Accepted value from 0 to 1.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Add Point annotation - This action is used to add the point annotation on the chart.
Fields:
Title
Description
Type
Id
The unique id of the annotation to be added. This value can be used later for the "Remove annotation" action.
string (optional)
X-value
The existent label from the X-axis category.
string
Y-value
The existent value from the Y-axis range.
number
Label text
The text, which represents the annotation.
string
Point size
The size of the point that represents annotation.
number
Point color
The color of the point annotation.
Color
Stroke width
The stroke width of the point annotation.
number
Stroke color
The color for the point stroke.
Color
Point shape
The shape for annotation.
Dropdown
Square border-radius
The radius of square annotation. This will work just if was selected "square" from the "Point shape" field.
number
Label border-color
The color for the label border.
Color
Label border width
The width of the label border.
number
Label border-radius
The border radius for label border.
number
Text Color
The color for the text from the label.
Color
Background color
The color for the label background.
Color
Remove annotation - This action is used to remove an annotation from the chart.
Fields:
Title
Description
Type
Id
The annotation id that was added to the chart.
string
Clear All annotations - This action is used to remove all annotations from the chart.
Generate PNG Url - This action is used to generate the PNG URL for the chart.
Element Events
Title
Description
Chart is drawn
This event is triggered when the chart is completely drawn.
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
PNG Url is available
This event is triggered when the PNG URL is available.
Element States
Title
Description
Type
Index on click
Returns the index of the X-axis label when the chart is clicked.
number
Index on hover
Returns the index of the X-axis label when the chart has hovered.
number
Label on hover
Returns the X-axis label when the chart has hovered.
string
PNG URL
Returns the generated PNG url after execution of the "Generate PNG Url" action.
string
Value on click
Returns the Y-axis value when the chart is clicked.
number
Value on hover
Returns the Y-axis value when the chart has hovered.
number
18. Funnel 1D Chart
This element draws a 1D funnel chart.
Element Fields
Title
Description
Type
Labels
The labels for provided data.
list of strings
Chart orientation
The orientation for the chart.
Dropdown
Chart colors
The comma-separated colors for the chart. If not provided, will be assigned the default colors. If it is provided just one color then the whole chart will be the same. If it is provided more colors then the chart will be colored as a gradient.
text
Line color
The color for the separation lines.
Color
Value color
The color for provided values is displayed on the chart.
Color
Value weight
The weight for provided values is displayed on the chart.
Dropdown
Value size
The size for provided values is displayed on the chart.
number
Label color
The color for provided labels is displayed on the chart.
Color
Label weight
The weight for provided labels is displayed on the chart.
Dropdown
Label size
The size for provided labels is displayed on the chart.
number
Show percentages
This option allows to representation of provided values in percentages on the chart.
Checkbox
Percent value color
The color for percentages on the chart.
Color
Percent value weight
The weight for percentages on the chart.
Dropdown
Percent value size
The size for percentages on the chart.
number
19. Funnel 2D Chart
This element draws a 2D funnel chart.
Element Fields
Title
Description
Type
Labels
The labels for provided data.
list of strings
Values
The total values for every sublabel.
list of numbers
Chart orientation
The orientation for the chart.
Dropdown
Chart colors
The comma-separated colors for the sublabel. Separate with a new line for every sublabel. If not provided, will be assigned the default colors. If is provided just one color per line then the whole sublabel will be the same. If provided more colors per line then the sublabel will be colored as gradient.
string
Line color
The color for the separation lines.
Color
Value color
The color for provided values is displayed on the chart.
Color
Value weight
The weight for provided values is displayed on the chart.
Dropdown
Value size
The size for provided values is displayed on the chart.
number
Label color
The color for provided labels is displayed on the chart.
Color
Label weight
The weight for provided labels is displayed on the chart.
Dropdown
Label size
The size for provided labels is displayed on the chart.
number
Show percentages
This option allows to representation of provided values in percentages on the chart.
Checkbox
Percent value color
The color for percentages on the chart.
Color
Percent value weight
The weight for percentages on the chart.
Dropdown
Percent value size
The size for percentages on the chart.
number
Show raw data in the tooltip
This option allows showing the provided data on the tooltip. If the option is not selected then data is displayed in percentages.
Checkbox
Background color
The color for the tooltip background.
Color
Sublabel color
The color for sub-labels.
Color
Legend title color
The color for the legend text.
Color
Legend title weight
The weight for the legend text.
Dropdown
Legend title size
The size for the legend text.
number
20. Sankey Chart
This element draws a Sankey chart.
Element Fields
Title
Description
Type
Series data type
The data type with "name", "target" and "value" characteristics.
App Type
Series data
List of objects that contain all necessary information. The type of objects should be the same as selected in the "Series data type" field.
list of App Types
Series name field
Objects field that represents the name.
string field of App Type
Series target field
Objects field that represents the target.
string field of App Type
Series value field
Objects field that represents the value.
number field of App Type
Decimal separator
The symbol that separates the decimal part of the number area.
string (optional)
Decimal amount
The number of digits of the decimal part.
number
Thousand separator
The symbol that separates a thousand value from the rest of the number.
string (optional)
Chart orientation
The orientation for the chart.
Dropdown
Draggable chart
This option allows adding chart node interaction.
Checkbox
Chart colors
The comma-separated colors for the chart. If not provided, will be assigned the default colors.
string (optional)
Link Color
The color for the path that links the nodes.
Color
Link opacity
The opacity for the path that links the nodes. Accepted values from 0 to 1.
number
Link curviness
The curviness of the path that links the nodes. Accepted values from 0 to 1.
number
Disable emphasis
This option allows to disable the highlight effect when the mouse hovered over the element, the tooltip is triggered, or the legend is hovered.
Checkbox
Show name label
This option allows to show the label of the node.
Checkbox
Name label color
The color for the label of the node.
Color
Name label size
The size for nodes label.
number
Name label position
The position of the node's label relates to the node.
Dropdown
Show value label
This option allows to show the value on the path that links the nodes.
Checkbox
Value label color
The color for value.
Color
Value label size
The size for value.
number
Value label align
The alignment for value relates to the link path.
Dropdown
Padding top
The padding from the top.
number
Padding right
The padding from the right.
number
Padding bottom
The padding from the bottom.
number
Padding left
The padding from the left.
number
Enable decal
This option allows setting style for the decal pattern.
Checkbox
Decal pattern
The style for decal pattern.
Dropdown
Decal pattern color
The color for the decal pattern.
Color
Enable animation
This option allows animating the chart.
Checkbox
Animation speed
This value represents the time in milliseconds allocated for animation. The more value - the more time for animation.
number
Animation delay
This value represents the waiting time in milliseconds before animation.
number
Show tooltip
This option shows a tooltip on the chart on hover.
Checkbox
Tooltip text color
The color for the tooltip text.
Color
Tooltip text size
The size for the tooltip text.
number
Tooltip background color
The color for the tooltip background.
Color
Tooltip border-color
The color for the tooltip border.
Color
Tooltip border width
The size of the tooltip border.
number
Tooltip padding-top
The top padding for tooltip content.
number
Tooltip padding-right
The right padding for tooltip content.
number
Tooltip padding-bottom
The bottom padding for tooltip content.
number
Tooltip padding-left
The left padding is for tooltip content.
number
Enable toolbar
This option allows adding the toolbar options on the top right side of the chart.
Checkbox
Enable download
This option allows to add download option in the toolbar.
Checkbox
File extension
The wanted extension for the downloaded file.
Dropdown
Reset the hover state on the mouse leave
With element is provided some states when the mouse is over the chart. This option allows to reset the states when the mouse leaves the chart.
Checkbox
Element Events
Title
Description
Chart is clicked
This event is triggered when the chart is clicked.
Chart has hovered
This event is triggered when the chart has hovered.
Element States
Title
Description
Type
Source on click
Returns the source node name when the chart is clicked.
string
Target on click
Returns the target node name when the chart is clicked.
string
Value on click
Returns the value when the chart is clicked.
number
Source on hover
Returns the source node name when the chart has hovered.
string
Target on hover
Returns the target node name when the chart has hovered.
string
Value on hover
Returns the value when the chart has hovered.
number
21. Lists calculation
This element performs mathematical operations between lists.
Element Fields
Title
Description
Type
List of numbers 1
The first list for mathematical calculations.
list of numbers
List of numbers 2
The second list is for mathematical calculations. This field is required if the "Use calculation between list and number" option is unchecked. Otherwise, it is optional.
list of numbers (optional)
Operation
This dropdown defines all allowed operations.
Dropdown
Calculation between list and number
The number for calculations between 'List of numbers 1's values. This field is mandatory if the 'Calculation between list and number' option is checked. Otherwise, it is optional.
number (optional)
Element States
Title
Description
Type
result
Returns the concatenated values separated with comma (,).
text
Workflow example
Minimal settings for chart
This example represents the minimal settings you can set for charts.
In the database is created object with the following fields: category, value.
In the database are added some data.
On the page is placed a Line Chart element.
The minimal settings for the chart are shown below. Was completed in just 3 fields.
After the above settings, in the preview, the chart will look like in the image below.
Synchronized charts creation
This example is presented how to synchronize line and area charts.
On the page, is placed two chart elements a Line Chart element with minimal settings and an Area Chart element with minimal settings.
For both elements, the Syncing ID is set with the same ID.
In the preview, the charts will work together when the one of charts will be hovered.
Timeline chart
This example represents how to add data for the Timeline Chart element.
In the database is created object with the following fields: Category, End data, Name, Start date.
In the database are added some data.
On the page is placed the Timeline Chart element with the following configured fields.
In the preview, it will look like in the image below.
Funnel chart 1D
This example represents how to add data for the Funnel 1D Chart element.
In the database is created object with the following fields: Label, Sublabel, Value.
In the database are added some data.
On the page is placed the Funnel 1D Chart element with the following configured fields.
☝
For the Labels field mandatory need to use “: unique elements” for the Label object field!
☝
For the Values field mandatory need to use “: grouped by” like in the image below!
In the preview, it will look like in the image below.
Additionally, the Chart colors field helps to customize the chart.
☝
The colors in the Chart colors field should be comma separated!
In the preview, it will look like in the image below.
Funnel chart 2D
This example represents how to add data for Funnel 2D Chart element.
In the database is created object with the following fields: Label, Sublabel, Value.
In the database are added some data.
On the page is placed Funnel 2D Chart element with the following configured fields.
☝
For the Labels field mandatory need to use “: unique elements” for the Label object field!
☝
For the Sublabels field mandatory need to use “: unique elements” for the Sublabel object field!
☝
For the Values field mandatory need to use “: grouped by” like in the image below!
In the preview, it will look like in the image below.
Additionally, the Chart colors field helps to customize the chart.
☝
For Funnel 2D chart the colors in the Chart colors field can be separated with commas and new lines! Use Enter for a new line.
Every line is considered for every sublabel. In the image below the “#FFF599,#E973FF” colors are used for the Good sublabel but “#FF0000” is used for the Worst sublabel.
In the preview, it will look like in the image below.
Append more than 3 series from the start
This example represents how to use Append new series action for adding more than 3 serieson the chart from the start.
In the database is created object with the following fields: category, value.
In the database are added some data.
On the page is placed a Line Chart element with completed data fields.
In the workflow, when Chart is drawn event appears then is called Append new series. This action will add the 4th series on the chart from the start.
In the preview, it will look like in the image below.
Add annotation
This example represents how to add annotation with one value on the chart.
On the page is placed a Line Chart element.
Also, on the page, is placed a Button element.
In the workflow, when the Add annotation button is clicked then is called Add X-Axis annotation action.
In the preview, it will look like in the image below.
Add ranged annotation
This example represents how to add annotation with two values on the chart.
On the page is placed a Line Chart element.
Also, on the page, is placed a Button element.
In the workflow, when the Add annotation button is clicked then is called Add Y-Axis annotation action.
In the preview, it will look like in the image below.
Perform mathematical operation between lists
This example represents how to List the calculation elements.
On the page is placed the following Bar Chart element with one series.
Also, on the page is placed the following Lists calculation element.
We came back to the Bar Chart element but with 2nd series.
☝
The “result” state from the Lists calculation should be converted to a list of numbers with the following Bubble expression: :split by (,):each item:converted to number.
Changelogs
Update 23.04.24 - Version 1.24.0
Fixed color assignment for series in Line & Bar elements.
Update 17.04.24 - Version 1.23.0
Added annotations for Bar & "dashed width" for Line, fixed Y-axis formatting & Bar Chart.
Added annotations for Bar Chart.
Added separately "Dashed width" for series for Line Chart.
Added "X-axis label count" field for the following charts: "Line", "Area", "Bar", "Heatmap", "Bubble", "Scatter", "BoxPlot", "Candlestick", "Mixed", "Range Area", and "Timeline".
Update 01.03.24 - Version 1.21.0
Removed redundant fields for Bubble, Scatter, Timeline elements.
Update 16.02.24 - Version 1.20.0
Fixed issue with different sizes of data and categories.
