✅
Demo to preview the settings
✅
Introduction
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) |
Font family | Any Google font for the whole chart. Ex.: "Atomic Age", "Roboto". | text |
Enable sparkline | This option hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas. | 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 |
Show data labels | Show or hide data labels on the chart. | Checkbox |
Font size | Font size for all data labels. | Dropdown |
Font weight | Font weight for all data labels. | Dropdown |
Color 1 | Data labels color for the 1st serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Color 2 | Data labels color for the 2nd serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Color 3 | Data labels color for the 3rd serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Offset | Separate by comma 2 numbers which will indicate offset from the top and left related to initial position. NOTE: Are accepted negative values! Ex.: "-10,7" (top: -10px, left: 7px) | text |
Background | Enables the background rectangle around the label. | Checkbox |
Label color with background | Common labels color for all series if the "Background" field is enabled. NOTE: Doesn't support the opacity option! | Color |
Background opacity | Opacity for the background rectangle around the label. NOTE: Are accepted values from range [0, 1]! | 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 |
Label on click | Returns the X-axis label when the chart is clicked. | text |
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 | (number) The marker size on hover. If the marker size is 0 but you want it on hover to be visible and use this field value, it is required to uncheck "Tooltip intersect" field. | 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 |
Tooltip intersect | Show tooltip only when user hovers exactly over datapoint. | Checkbox |
Shared tooltip | When having multiple series, show a shared tooltip. | Yes/No |
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 |
Use series colors | This option colors the labels of legend in series' colors. | Checkbox |
Legend labels colors | (optional) A text list with colors divided by "," (ex: #BC47A3, #24292E, #78909C) . Sets the colors for the legend labels. If you use this field please keep "Use series colors" unchecked. | Text |
Legend markers colors | (optional) A text list with colors divided by "," (ex: #BC47A3, #24292E, #78909C) . Sets the colors for the legend markers. | Text |
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 |
Use series colors
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) |
More Series (JSON Array) | (optional) Adds more series to the chart. Must follow the json example in a precise way, any issue in it may cause errors. | text |
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) |
Font family | Any Google font for the whole chart. Ex.: "Atomic Age", "Roboto". | text |
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 |
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 |
Border radius | Sets rounded corners around the bars/columns. Do not use values above 10. | number |
Stroke width | The stroke width of the bar. | number |
Stroke color | (color) (optional) The stroke color of the bar. Sets one single stroke color for all bars, if the field is unset it will use for every bar its original color, but darker. | color |
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 |
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 |
Font size | Font size for all data labels. | Dropdown |
Font weight | Font weight for all data labels. | Dropdown |
Color 1 | Data labels color for the 1st serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Color 2 | Data labels color for the 2nd serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Color 3 | Data labels color for the 3rd serie. [1] If the "Background" field is enabled, this color will be applied for the background rectangle around the label. Set up the "Label color with background" field to color the labels. [2] If the "Background" field is disabled, this color will be applied for the label. NOTE: Doesn't support the opacity option! | Color (optional) |
Offset | Separate by comma 2 numbers which will indicate offset from the top and left related to initial position. NOTE: Are accepted negative values! Ex.: "-10,7" (top: -10px, left: 7px) | text |
Background | Enables the background rectangle around the label. | Checkbox |
Label color with background | Common labels color for all series if the "Background" field is enabled. NOTE: Doesn't support the opacity option! | Color |
Background opacity | Opacity for the background rectangle around the label. NOTE: Are accepted values from range [0, 1]! | 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 |
Custom legend items | (optional) A list of legend labels, please divide them by "," (ex: Q1 Budget, Q2 Budget, Q3). Allows you to overwrite the default legend items with this customized set of labels. Please note that the click/hover events of the legend will stop working if you provide these custom legend labels. | Text |
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 |
Label on click | Returns the X-axis label when the chart is clicked. | string |
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. |