Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
A Box-plot chart is a visual representation displaying a given statistical data set based on a five-number summary: the minimum, the first quartile (25th percent), the median (second quartile), the third quartile (75th percent), and the maximum. Such charts are extremely useful for comparing distributions of values across categories. The Box-plot is also referred to as box plot, box-and-whisker plot, box-and-whisker diagram.These charts contain boxes and whiskers (vertical or horizontal lines that extend from the minimum to Quartile 1 and from Quartile 3 to the maximum).
You can find a more in depth explanation about the boxplot on this page:
Property name | Data Type | Type | Description |
---|---|---|---|
Data source
List
Data Model
Data list source for the widget.
X Axis Category
Text
Expression
Categories displayed on x axis.
Y Axis Value
Number
Expression
Values displayed on y axis.
Custom Scale
Boolean
Expression
Change scale to a custom scale with custom properties.
Opposite Scale
Boolean
Expression
Changes position of y axis values to the opposite position.
Max Scale Value
Number
Expression
Maximum value for the scale.
Min Scale Value
Number
Expression
Minimum value for the scale.
Tick Amount
Number
Expression
Number of visual ticks for the scale.
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
Show x-axis tooltip
Boolean
Expression
Show x-axis tooltip.
Show y-axis tooltip
Boolean
Expression
Show y-axis tooltip.
Label decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Drop Down
Change the text and background colours of the chart.
Upper colour
Text
Expression
Upper colour for the boxplot chart. Hex or rgb/rgba colour.
Lower color
Text
Expression
Lower colour for the boxplot chart. Hex or rgb/rgba color.
Background color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)".
Display vertical grid lines
Boolean
Expression
Display vertical grid lines.
Display horizontal grid lines
Boolean
Expression
Display horizontal grid lines.
Brush chart allows users to constrain the results on their graph by choosing to Include or Exclude certain areas. This is a much more interactive filtering method, as the user defines what they want to see or remove by highlighting the particular area on their graph.
You can find a more in depth explanation about the brush on this page: https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/
Properties of Brush Chart
Bubble Chart are useful for showing data in a three-dimensional manner. In a bubble chart, data points are depicted with bubbles. It is drawn with a data series that each contains a set of three values. A bubble chart is a form of scatter chart that has its data points replaced with bubbles. In ApexCharts, each bubble representation can be analyzed for the information it defines. With its scattered nature, the bubble chart can be used to depict many data points within the 3-D plane. Unlike a scatter chart which has two reference axes (X-axis and Y-axis), a bubble chart has a third axis incorporated (Z-axis) with it and this third numeric field controls the size of the data bubbles.
Properties of Bubble Chart
You can find a more in depth explanation about the bubble on page:
Property Name | Data Type | Type | Description |
---|
N°
Property Name
Data type
Description
1
Data source
List
Data Model
Source of the data list for the widget.
2
X axis category
Text
Expression
Text categories displayed on the x-axis.
3
Y axis values
Number
Expression
Numerical values displayed on the y-axis.
4
Series
Text
Expression
This field is used to create different series from the same data source.
It's not mandatory.
5
Show Animation
Boolean
Expression
Show render animation. use true or false
6
Y-Axis label position
Text
Dropdown
Sets the position of the Y axis values to the right or left.
(left(false), right(true)).
7
Custom scale
Boolean
Change the scale to a custom scale with custom properties.
8
Min scale value
Number
Expression
Minimum value for the scale.
9
Max scale value
Number
Expression
Maximum value for the scale.
10
Tick scale amount
Number
Expression
Number of visual marks for the scale.
11
Set initial scope
Boolean
Boolean to specify zoomed values of the chart.
12
Start scope value
Number
Expression
Initial value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want from June you use: 6
13
End scope value
Number
Expression
End value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want until December you use: 12
14
Height
Text
Expression
Height of the main graphic.
15
Width
Text
Expression
Width of the main chart.
16
Control chart height
Number
Expression
The height value of the lower graph (control).
17
Show tooltip
Boolean
Show tooltips.
18
Prefix
Text
Expression
Displays a prefix for values in tooltips.
19
Postfix
Text
Expression
Displays a suffix for values in tooltips.
20
Label decimals
Number
Expression
Set the number of decimal places displayed for y-axis values.
21
Show grid
Boolean
Boolean to display the grid options.
22
Grid lines vertical
Boolean
Expression
Show vertical lines in the grid. Use true or false.
23
Grid lines horizontal
Boolean
Expression
Show horizontal lines in the grid. use true or false
24
Grid lines color
Text
Expression
Change the color of the lines in the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
25
Background color
Text
Expression
Change the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
26
Theme
Text
Dropdown
Change the text and background colors of the chart. (Light, Dark).
27
Template
Text
Dropdown
A set of predefined color values for chart groups. (Palette1, Palette2, Palette3, Palette4, Palette5, Palette6, Palette7, Palette8, Palette9, Palette10).
28
Lines width
Number
Expression
Numerical value of the thickness of the lines within the graph.
29
Legend font size
Number
Expression
Change the font size of the legend.
30
Legend position
Text
Dropdown
Change the position of the legend. (Bottom, top, right, left).
Data source | List | Data Model | Data list source for the widget. |
X axis type | Text | Drop Down | Determines the type of X axis used. |
X axis category | Text | Expression | Categories displayed on x-axis. |
X axis date | Date | Expression | Date values displayed on x-axis. |
Y axis value | Number | Expression | Values displayed on y-axis. These are expected to be numeric values. |
Bubble size | Number | Expression | This field corresponds to the size of the bubble. These are expected to be numeric values. |
Series | Text | Expression | This field is used to create different series from the same data source. It's not required. |
Series color | Text | Expression | This field is used to set the color of the series. If empty a random color will be selected. Hexadecimal Colors format Ex.: "#2E93fA" |
Logarithmic scale | Boolean | Expression | Change scale to logarithmic scale. |
Use opposite scale | Boolean | Expression | Changes position of y axis values to the opposite position. |
Max scale value | Number | Expression | Maximum value for the scale. |
Min scale value | Number | Expression | Minimum value for the scale. |
Tick scale amount | Number | Expression | Number of visual ticks for the scale on the axis. |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
Label decimals | Number | Expression | Set number of decimals displayed for y-axis values. |
Theme | Text | Dropdown | Change the text and background colors of the chart. |
Background color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Example: "#FFFFFF60" |
Grid lines vertical | Boolean | Expression | Display vertical grid lines. |
Grid lines horizontal | Boolean | Expression | Display horizontal lines on the grid. |
Grid lines color | Text | Expression | Change color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Legend font size | Number | Expression | Change font size of the legend. |
Legend position | Text | Dropdown | Change position of the legend. |
Fill type | Text | Dropdown | Change fill type of the chart. |
Fill opacity | Number | Expression | Change the fill opacity of the chart. From 0.00 to 1.00 |
Prefix | Text | Expression | Display a prefix for values on tooltip. |
Postfix | Text | Expression | Display a postfix for values on tooltip. |
ShowAnimation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | Set height of the chart. Type number. |
Width | Number | Expression | Set width of the chart. Type number. |
A Candlestick Chart (or Candle Chart) is a type of financial chart that describes the price changes of a security, derivative, or currency. Candlestick graphs and charts usually represent data as numerical values in vertical axes and compare the price movements across time, visualizing the open, high, low, and close values.
You can find a more in depth explanation about the candlestick chart on this page: https://apexcharts.com/docs/chart-types/candlestick/
Properties of Candle Stick Chart
The Effect Scatter Chart is a chart that shows the relationship between two variables. They are an incredibly powerful chart type, allowing viewers to immediately understand a relationship or trend, which would be impossible to see in almost any other form. the effect intensify the point that the user want to difference along all others.
Properties of Effect Scatter Chart
A heat map is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The variation in color may be by hue or intensity, giving obvious visual cues to the reader about how the phenomenon is clustered or varies over space.
Properties of Heat Map
Card widget in flutter is a sheet of Material used to represent all the similar information in a single block in a compressed way, it is also possible to show results through some types of graphs, such as linear, area and bar graphs, any type of summary data projection.
Properties of Card
A JavaScript Mixed Chart or a Combo Chart is a visualization that allows the combination of two or more distinct graphs. The features of each chart are retained on the mixed chart plot. Different scales of measure are present on the mixed chart and with this; it is an ideal plot for presenting data values that are usually difficult to combine because of the significant difference in value ranges. Generally, a combo chart makes it possible to view the relationship, differences, deviations, and anomalies between a different set of data by bringing them on a single plot.
Properties of Line & Bar Chart
Property Name | Data type | Type | Description |
---|---|---|---|
You can find a more in depth explanation about the Effect Scatter on page:
You can find a more in depth explanation about the Heat map on page:
You can find a more in depth explanation about the card with chart on page:
You can find a more in depth explanation about the line, area and bar on page:
Data source
List
Data Model
Data list source for the widget.
X axis date
Date
Expression
Date values displayed on x-axis.
Y axis open
Number
Expression
Open price displayed on y-axis.
Y axis high
Number
Expression
High price displayed on y-axis.
Y axis low
Number
Expression
Low price displayed on y-axis.
Y axis close
Number
Expression
Close price displayed on y-axis.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Use opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position.
Min scale value
Number
Expression
Minimum value for the scale.
Max scale value
Number
Expression
Maximum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
X axis tooltip
Boolean
Expression
Show x-axis tooltip.
Y axis tooltip
Boolean
Expression
Show y-axis tooltip.
Label decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart.
Upward color
Text
Expression
Upward color for the chart.
Downward color
Text
Expression
Downward color for the chart.
Background color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.
Examples:
"#FFFFFF60" or "rgba(255, 255, 255, 0.6)"
Grid lines vertical
Boolean
Expression
Display vertical lines on the grid.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid.
Grid lines color
Text
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show animation
Boolean
Expression
Display animation on render.
Height
Number
Expression
Set height of the chart.
Type number.
Width
Number
Expression
Set width of the chart.
Type number.
Property Name | Data type | Type | Description |
Data Source | List | Data Model | Datalist source for the widget. |
X axis | Number | Expression | Values displayed on x-axis. These are expected to be numeric values. |
Y axis | Number | Expression | Values displayed on y-axis. These are expected to be numeric values. |
Effect point | Boolean | Expression | Boolean that determines if a given point is has an effect. |
SelectedValueOutputID | Text |
| To select the specific value of the scatter chart, to put the differentiator effect in the point. |
Show Xaxis Scale | Boolean | Expression | Show de scale of the x axis. |
Show Yaxis Scale | Boolean | Expression | Show de scale of the y axis. |
Scatter points color | Text | Expression | Defines the color of the scatter chart points. |
Effect Points Color | Text | Expression | Defines the color of the effect points. |
Scatter Chart Symbols | Text | Dropdown | To change the style of the scatter symbol. (Cirlce, rect, roundrect, triangle, diamond, pin, arrow). |
Effect symbol size | Number | Expression | to change the size of the effect symbol |
Scatter symbol size | Number | Expression | to change the size of the symbol. |
Height | Text | Expression | Set height of the chart. Type number. |
Width | Text | Expression | Set width of the chart. Type number. |
Property Name | Data type | Type | Description |
Data Source | List | Data model | List containing all labels, values and series. |
Value | Number | Expression | Set the value of the heat map. |
Label | Text | Expression | The label on the x axis. |
Series | Text | Expression | This field is used to create different groups from the same data source. The series are part of the y axis. |
Color | Text | Expression | Color of the item. Note that each series can only have a single color. The first color of an item part of the series will be used. |
Height | Number | Expression | Can be set to number, percentage of container or pixels. |
Property Name | Data type | Type | Description |
Card title | Text | Expression | To set the title of the card. |
Title style | Text | Dropdown | Defines the HTML Tag style for the title text. (H1, H2, H3, H4, H5, H6). |
Subtitle | Text | Expression | To set the subtitle of the card. |
Subtitle style. | Text | Dropdown | Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6). |
Card content | Text | Expression | The content of the card. |
Content style | Text | Dropdown | Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6). |
Show chart | Boolean | Expression | To show or not, the chart in the card. |
Chart position | Text | Dropdown | Determines the positioning of the chart in the card. (2 – right, -1 - left.) |
Type | Text | Dropdown | Defines which graph type is displayed on the card. (Bar, line, area). |
Data Source | List | Expression | The list of the data source. |
Label | Text | Expression | Set the label of the list. |
Value | Number | Expression | Set the value of the list. |
Series name | Text | Expression | The series of the list. |
Clickable | Boolean |
| If enabled the card will be a clickable object. |
On click | Text | Dropdown | Defines the action to take after the user clicks the card. (Exit, flowchart, navigation, Refresh). |
Exit | Button |
| To click the button of selected value. |
Flowchart | Flowchart |
| Set the flowchart to the following card. |
Navigation | Navigation item |
| Set the navigation to the following card. |
Background color on hover | Text | Expression | Defines the background color change when hovering a card. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Body padding | Number | Expression | Adds padding to the chart according to the number in pixels. (Default value = 0) |
Border radius | Number | Expression | Sets a specific border radius for the rounded corners (Default is 0px for non-round corners) |
Show Box shadow | Boolean | Expression | "Card" effect, makes it look like the card is floating. true |
Border Style | Text | Dropdown | he border-style property specifies what kind of border to display. (Solid, dotted, dashed, double, groove, ridge). |
Border color | Text | Expression | The color can be set by:
name - specify a color name, like "red" HEX - specify a HEX value, like "#ff0000" RGB - specify a RGB value, like "rgb(255,0,0)" HSL - specify a HSL value, like "hsl(0, 100%, 50%)" transparent |
Border Width | Number | Expression | The width can be set as a specific number of pixels. Default value: 0(Set to 1 or higher for the border to appear) |
Chart Color | Text | Expression | Defines the color of the Chart. Only works when provided with either hex or rgb/rgba format. Color names are not supported. |
Header background color | Text | Expression | Defines the background color of the header using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Body background color | Text | Expression | Defines the background color of the card body using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Title icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle" size modifiers are not needed. |
Title text color | Text | Expression | Defines the color of the title icon and text using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Title icon size | Text | Dropdown | Defines the size for the title icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Tooltip content | Text | Expression | Tooltip for the info icon, use it to describe the contents of the card. If no value is set the tooltip and its icon won't show up. |
Tooltip icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle"(This is the default Icon used when undefined) size modifiers are not needed. |
Tooltip icon color | Text | Expression | Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Tooltip icon size | Text | Dropdown | Defines the size for the tooltip icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Subtitle icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle" size modifiers are not needed. |
Subtitle icon color | Text | Expression | Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Subtitle icon size | Text | Dropdown | Defines the size for the subtitle icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
X axis category | Text | Expression | Text categories displayed on x-axis. |
Y axis value | Number | Expression | Numeric values displayed on y-axis. |
Series | Text | Expression | This field is used to create different series from the same data source. It's not required. |
Series Color | Text | Expression | This field is used to set the colour of the series. If empty a random colour will be selected. |
Logarithmic scale | Boolean | Expression | Change scale to logarithmic scale. |
Custom scale | Boolean |
| Change scale to a custom scale with custom properties. |
Use Opposite Scale | Boolean | Expression | Changes position of y axis values to the opposite position. |
Max scale value | Number | Expression | Maximum value for the scale. |
Min scale value | Number | Expression | Minimum value for the scale. |
Tick scale amount | Number | Expression | Number of visual ticks for the scale. |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
Label decimals | Number | Expression | Set number of decimals displayed for y-axis values. |
Theme | Text | Dropdown | Change the text and background colors of the chart. |
Background color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)". |
Grid lines vertical | Boolean | Expression | Display vertical lines on the grid. |
Grid lines horizontal | Boolean | Expression | Display horizontal lines on the grid. |
Grid lines color | Text | Expression | hange color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Legend font size | Number | Expression | Change font size of the legend. |
Legend position | Text | Dropdown | Change position of the legend. (Bottom, left, top, right). |
Chart type | Text | Dropdown | Select a different type of chart. (Bar, line, area). |
Fill type | Text | Dropdown | Change fill type of the chart. (Solid, gradient, pattern). |
Fill opacity | Number | Expression | Change the fill opacity of the chart. From 0.00 to 1.00 |
Prefix | Text | Expression | Display a prefix for values on tooltip. |
Postfix | Text | Expression | Display a postfix for values on tooltip. |
Show animation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | Set height of the chart. Type number. |
Width | Number | Expression | Set width of the chart. Type number. |
Map morphing is an interactive visualization technique that provides a user-controlled, animated translation from one map to another. Traditionally, overlay mechanisms are used to present layers of information over a single projection. Map morphing provides a way to relate maps with significant spatial and schematic differences.
You can find a more in-depth explanation about the map bar morph on this page: https://echarts.apache.org/examples/en/editor.html?c=map-bar-morph
Properties of Map-Bar Morph
The Nested Pie Chart is a special type of chart that allows you to show symmetrical and asymmetrical tree structures in a consolidated pie-like structure. The chart is visualized as a series of concentric circles arranged like a pie. The circles are divided into segments that represent each of the data values; the ratio of each segment is determined by the corresponding data value. This chart can be used to show organizational structures, interlinked tree data (like friends of friends), category-wise sales break up, and so on.
You can find a more in depth explanation about the nested pie on this page: https://echarts.apache.org/examples/en/editor.html?c=pie-nest
Properties of Nested Pie Chart
Mix time imeline charts illustrate events, in chronological order — for example the progress of a project, advertising campaign, acquisition process — in whatever unit of time the data was recorded — for example week, month, year, quarter.
You can find a more in depth explanation about the Mix Time Line on this page:
https://echarts.apache.org/examples/en/index.html#chart-type-line
Properties of Mix Time Line Chart
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data like a pie chart, but also show a scale of values for context.
Properties of Polar Area Chart
You can find a more in depth explanation about the polar area on page:
Property Name
Data type
Type
Description
Data Source
List
Data model
Datalist source for the widget.
Name
Text
Expression
The name of the map area where the value belongs to, such as 'China' or 'United Kingdom' or if map type is US the State name like "Alaska" or "Florida".
Value
Number
Expression
The value associated with the name.
Map
Text
Dropdown
Change map template. (World, US).
Sort bar chart values
Boolean
Expression
This property orders the values by descending order.
Reverse sort bar chart values
Boolean
Expression
If order values is true, this property changes the values order to ascending order.
Initial view
Text
Dropdown
Set the initial view of the map, it could be first the map and after the bar, or bar and after the map. (Map, bar).
Interval duration
Text
Expression
This is the time interval in which charts alternate. 0 means no animation.
Time is set on milliseconds (1 second = 1000 milliseconds)
Transition animation duration
Text
Expression
This is the time the transition animation takes to finish.
Map high color
Text
Expression
Color for the higher values of the scale and map.
Map middle color
Text
Expression
Color for the middle values of the scale and map.
Leave empty if you only want 2 colors for the scale.
Map low color
Text
Expression
Color for the lower values of the scale and map.
Use map hover
Boolean
Expression
Allow mouse hover on the map.
Map hover color
Text
Expression
Color when the mouse is over the map area.
Use map hover label
Boolean
Expression
Add a label on hover.
Map hover label fontcolor
Text
Expression
Change text color for the label.
Map hover label fontsize
Number
Expression
Change text size for the label.
Show map hover label background
Boolean
Expression
Add a background for the hover label.
Bar chart color
Text
Expression
Color for the bars on the bar chart.
Use bar chart hover
Boolean
Expression
Allow mouse hover on the bar chart.
Bar chart hover color
Text
Expression
Color when the mouse is over a bar.
Allow zoom on bar chart
Boolean
Expression
Adds zoom to the bar chart.
Zoom bar chart slider
Boolean
Expression
Adds zoom slider to the bar chart.
Zoom bar chart start
Number
Expression
Set the starting point for the zoom.
This value is based on a percentile location (1-100)
Zoom bar chart end
Number
Expression
Set the ending point for the zoom.
This value is based on a percentile location (1-100)
Height
Number
Expression
Set height of the chart.
Type number.
Width
Number
Expression
Set width of the chart.
Type number.
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list where the data is stored.
Label
Text
Expression
Labels for each of the values in the outer pie.
Value
Number
Expression
Values for the outer pie.
Chart Color
Text
Expression
Colors for the values in the outer pie.
Category
Text
Expression
The category is used as a label for the inner pie, The value for this is calculated automatically.
Category Color
Text
Expression
Defines the colors for each of the categories in the inner pie.
Inner Pie Name
Text
Expression
Defines the name of the inner pie chart. This name is used for the labels and the tooltips.
Outer Pie Name
Text
Expression
Defines the name of the outer pie chart. This name is used for the labels and the tooltips.
Show Value
Boolean
Expression
Determines if the value is shown on the tooltip label.
Value Prefix
Text
Expression
Set the prefix of the value.
Value Postfix
Text
Expression
Set the postfix of the value.
Show Percent
Boolean
Expression
Determines if the percent is shown on the tooltip label.
Percent Prefix
Text
Expression
Set the prefix of the percent.
Percent Postfix
Text
Expression
Set the postfix of the percent.
Height
Text
Expression
Sets the height of the element, accepts all the css height values.
default value: "500%"
Width
Text
Expression
Sets the width of the element, accepts all the css width values.
default value: "100%"
Inner Pie Start Radius
Number
Expression
Defines the start radius of the pie in percentages from 0-100.
Inner Pie End Radius
Number
Expression
Defines the end radius of the pie in percentages from 0-100.
Outer Pie Start Radius
Number
Expression
Defines the start radius of the pie in percentages from 0-100.
Default value: 45
Outer Pie End Radius
Number
Expression
Defines the end radius of the pie in percentages from 0-100.
Inner Font Size
Number
Expression
Font size for the labels of the inner pie
Default value:12
Outer Font Size
Number
Expression
Font size for the labels of the outer pie
Default value:12
Property Name
Data type
Type
Description
Data source
List
Data Model
The main datalist contains information about the series: X & Y values, series, years, series type and series color.
Series
Text
Expression
Series or Categories of the datalist. These values will also be used as the legends.
X axis category
Text
Expression
X axis values for the chart.
Y axis value
Number
Expression
Numeric Y axis values for the chart.
Years
Number
Expression
Years that will be used for the timeline. Each row of data needs one.
Series type
Text
Expression
Type of chart to display for each series. It accepts values of: "bar" or "line"
Series color
Text
Expression
The color of each series. It uses an rgba type or Hexadecimal type of color.
For example: "rgba(255,0,0,0.5)" or "#FF0000".
Play interval
Number
Expression
Amount of time (milliseconds) delay before each year change. 1000 = 1second.
Auto play
Boolean
Expression
Transitions starts as soon as the page gets uploaded.
Show grid lines
Boolean
To activate the grid lines of the chart.
Show vertical grid lines
Boolean
Expression
To activate the vertical grid lines of the chart.
Show horizontal grid lines
Boolean
Expression
To activate the horizontal grid lines of the chart.
Show pie chart
Boolean
Adds a pie chart with the total of the series per year.
Pie data source
List
Expression
Datalist that includes a row for each serie to show on the pie chart.
Pie chart title
Text
Expression
Title for the tooltip that appears when the user hovers over the pie chart.|
Pie chart series reference
Reference
Expression
A reference from the main data source which must point to the main chart series values.
Pie horizontal position
Text
Expression
Horizontal Position for the Pie Chart(From left to right) in percentage values.
Pie vertical position
Text
Expression
Vertical Position for the Pie Chart(From top to bottom) in percentage values.
Pie radius
Text
Expression
Radius value for the Pie Chart in percentage values.
Pie border color
Text
Expression
Color for the border of the pie chart. It uses an rgba type or Hexadecimal type of color.
For example: "rgba(255,0,0,0.5)" or "#FF0000".
Pie border width
Number
Expression
Numerical value for the border line width.
Pie label legend position
Text
Dropdown
Set the position of the label in the pie. (inside, outside).
Y axis units
Text
Expression
Y axis legend.
Legend orientation
Text
Dropdown
Set the orientation of the legend. (Vertical, horizontal).
Legend position
Text
Dropdown
Set the position of the legend. (Left. Center, Right).
Width
Text
Expression
Width of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100%
Height
Text
Expression
Height of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100%.
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Label | Text | Expression | Labels to be used for each series |
Value | Number | Expression | Values to be used for each series. |
Chart Color | Text | Expression | Colors to be used for each series.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats. |
Height | Text | Expression | Can be set to auto, percentage of container or pixels.
Default is auto. |
Width | Text | Expression | Can be set to percentage of container or pixels. Examples:
"350" or "350px" or "50%" |
Show Scale | Boolean |
| Determines if a scale is shown. |
Show Grid | Boolean |
| Determines if the grid is shown. |
Grid color | Text | Expression | Defines the colour of the grid. You should only provide either hex or rgb/rgba format.
Example: "#fff" |
Show strokes | Boolean |
| Determines if strokes are shown. |
Stroke Color | Text | Expression | Defines the color of the stroke. You should only provide either hex or rgb/rgba format.
Example: "#fff" |
Show legend | Boolean |
| If true, it will show a legend explaining the data on the chart. |
Legend Position | Text | Dropdown | Determines the position of the legend. (Left, Top, Right, Bottom). |
Legend font size | Number | Expression | number of the fontsize in px.
default 16px |
Legend offset y | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the top offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (Default is 0). |
Legend offset x | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the left offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart.(default is 0). |
The Polar bar is similar to the polar bar area chart, but each segment has the same angle - the radius of the segment differs depending on the value. The way of its sets the labels´ information over the polar also is different.
This type of chart is often useful when we want to show comparison data and also show a scale of values for context.
You can find a more in-depth explanation about the polar bar on this page: https://echarts.apache.org/examples/en/editor.html?c=bar-polar-label-tangential
Properties of Polar Bar Chart
A profit chart is a graphical representation of the relationship between the sales and profits of a business. The concept is especially useful for determining an organization’s breakeven point, where the sales level generates a profit of exactly zero.
You can find a more in depth explanation about the Profit on this page:
https://echarts.apache.org/examples/en/editor.html?c=custom-profit
Properties of Profit Chart
Radial bar is simply a Bar Chart plotted on a polar coordinate system, rather than on a Cartesian one.
While they look cool, the problem with Radial Bar Charts is that the bar lengths can be misinterpreted. Each bar on the outside gets relatively longer to the last, even if they represent the same value.
You can find a more in depth explanation about the radial bar on this page:https://apexcharts.com/javascript-chart-demos/radialbar-charts/
Properties of Radial Bar Chart
Radial Bar Charts are valuable in showing comparisons between categories by using circularly shaped bars. Also known as the circular bar chart, it is simply a typical bar chart plot represented on a polar coordinate system. JavaScript Radial Bar Charts are drawn by fixing a unique radius for each bar representing each data and each bar is judged by its angle. In ApexCharts, data can be represented on a radial bar chart in the various formats such as multiple radial bar charts, radial bar with an image, and even in semi-circular gauge forms.
You can find a more in depth explanation about the radial bar gauge on this page: https://apexcharts.com/javascript-chart-demos/radialbar-charts/
Rose type pie Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.
ECharts can implement Rose Chart by defining series.roseType of pie chart to 'area'. All other configs are the same as a basic pie chart.
Properties of Rosetype Pie Chart
A Range Bar displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to. So, the range bar chart is a vertical version of the range column chart.
Properties of Range Bar Chart
Sankey Diagram is a type of flow diagram that depicts the flow of resources (material, energy, cost, etc.) from one node to another. The start and endpoints of each flow are called nodes and the flow paths between them are called links. There can only be one link between a pair of nodes. The value of the flow between each pair of nodes is encoded by the width of the link. The coloration of the links help establishes visual mapping with their respective nodes.
Properties of Sankey Energy Chart
Property Name | Data type | Type | Description |
---|---|---|---|
You can find a more in depth explanation about the rosetype pie on page:
You can find a more in depth explanation about the range bar on page:
You can find a more in depth explanation about the Sankey energy on page:
Property Name
Data type
Type
Description
Data source
List
Data model
A list of labels and values.
Label
Text
Expression
Set the label of the polar bar chart.
Value
Number
Expression
Set the values of the polar bar chart.
Max value
Number
Expression
Bar values will be limited to the max value.
Start angle
Number
Expression
to set the size of the start angle of the axis of the chart.
Show labels
Boolean
Expression
Show or hide labels on top of the chart.
Show animation
Boolean
Expression
To activate the animation of the label on the polar bar chart.
Background color
Text
Expression
The background color, a hexadecimal number.
Bar color
Text
Expression
The color of the bars, hexadecimal format.
Height
Text
Expression
Set the height of the polar bar chart. The default value is “500 px”.
Property Name
Data type
Type
Description
Series
List
Data Model
The main data list that contains information of each label, its name, value and color.
Profit name
Text
Expression
The name of each label. These names will also be used as the legends of the chart.
From values
Number
Expression
The initial value of each profit.
To values
Number
Expression
The last value of each profit.
Profit value
Number
Expression
Numeric value (profit) for each label.
Label color
Text
Expression
The color of each label. It uses an rgba type or Hexadecimal type of color.
For example: "rgba(255,0,0,0.5)" or "#FF0000".
Width
Text
Expression
Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%
Height
Text
Expression
Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100%
Show label value
Boolean
Expression
Display the profit value of each bar.
Label legend position
Text
Dropdown
Position of the values for the labels of the chart. (Inside, left, right, top, bottom)
Background color
Text
Expression
Color for the background of the chart. This widget uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.
Border color
Text
Expression
Color for the border of the labels. This widget uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'.
Border width
Numeric
Expression
Numeric value for the border width of the labels.
From tooltip text
Text
Expression
Text shown for the "From" tooltip values.
To tooltip text
Text
Expression
Text shown for the "To" tooltip values.
Profit tooltip text
Text
Expression
Text shown for the "Profit" tooltip values.
Property Name
Data type
Type
Description
Data source
List
Data Model
Datalist where the data is stored.
Label
Text
Expression
To set the labels of the chart.
Value
Number
Expression
To set the value of the chart.
Chart color
Text
Expression
Colors to be used for each series.
Height
Text
Expression
Can be set to auto, percentage of container or pixels.
Width
Text
Expression
Can be set to percentage of container or pixels.
Angle style
Text
Dropdown
Defines the angle style for the radialbar (Full, Half, Half inverse, 3 Quarters).
Show legend
Boolean
Expression
If true, it will show a legend explaining the data on the chart.
Legend position
Text
Dropdown
Determines the position of the legend. (Left, right, top, bottom).
Legend font size
Number
Expression
number of the fontsize in px.
default 16px
Legend offset y
Number
Expression
Use for more specific positioning of the legend after using legend position.
Sets the top offset for legend container
in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (Default is 0)
Legend offset x
Number
Expression
Use for more specific positioning of the legend after using legend position.
Sets the left offset for legend container
in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (default is 0)
Hollow size
Number
Expression
Percentage of the chart that is the hollow section. (Default 30%)
Data label font size
Number
Expression
Defines the fontsize of the labels that appear when hovering a given track.
may cause clipping if too big.
number of the fontsize in px.
default 16px
Label
Text
Expression
Data display in the radial bar
Value
Number
Expression
Values display in radial bar
Chart Color
Text
Expression
Color for the charted value.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats
Show track
Boolean
Expression
Determines whether a track is used to show the full scale of the chart.
Track color
Text
Expression
Background color for the track.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats.
Height
Text
Expression
Can be set to auto, percentage of container or pixels. Default is auto.
Examples: "350" or "350px" or "50%" or "auto".
Width
Text
Expression
Can be set to percentage of container or pixels. Examples: "350" or "350px" or "50%".
Arc style
Text
Dropdown
Defines the arc style for the radialbar. (Full, half, half inverse, gap).
Hollow size
Number
Expression
Percentage of the chart that is the hollow section. (Default 30%)
Data label font size
Number
Expression
Sets the fontsize in px (default 16) of the label displayed in the chart. May cause clipping if too big.
Stroke width
Number
Expression
Determines the width of each stroke. The higher the number the thicker the stroke but less strokes will appear.
No strokes (full-filled) will appear at 0.
Default value: 0
Property Name | Data type | Type | Description |
Data Source | List | Data Model | Datalist where the data is stored. |
Label | Text | Expression | Labels for each of the values in the outer pie. |
Value | Number | Expression | Values for the outer pie. |
Chart color | Text | Expression | Colors for the values in the pie. |
Pie name (tooltip) | Text | Expression | Defines the name of the pie chart. This name is used for the labels and the tooltips. |
Show value (tooltip) | Boolean | Expression | Determines if the value is shown on the tooltip label. |
Value prefix (tooltip) | Text | Expression | Set the value of the prefix. |
Show percent (tooltip) | Boolean | Expression | Determines if the percent is shown on the tooltip label. |
Percent Prefix | Text | Expression | Set the percent prefix. |
Set the percent postfix. | Text | Expression | Set the percent postfix. |
Height | Text | Expression | Sets the height of the element, accepts all the css height values.
default value: "500%". |
Width | Text | Expression | Sets the width of the element, accepts all the css width values. |
Pie starts radius | Number | Expression | Defines the start radius of the pie in percentages from 0-100. |
Pie end radius | Number | Expression | Defines the end radius of the pie in percentages from 0-100. |
Font size | Number | Expression | Font size for the labels of the pie
Default value:12 |
Rosetype style | Text | Expression | Which type of rosetype value presentation the chart will use
Radius: Uses central angle to show the percentage of data, radius to show data size.
Area: All the sectors will share the same central angle; the data size is shown only through radiuses. (Radius, Area). |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Label | Text | Expression | Labels displayed on y-axis. |
Date start | Date | Expression | Starting date of a range. |
Date end | Date | Expression | End date of a range. |
Series | Text | Expression | This field is used to create different series from the same data source. It's not required. |
Series color | Text | Expression | This field is used to set the color of the series. If empty a random color will be selected. Hexadecimal Colors format Ex.: "#2E93fA" |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
Theme | Text | Dropdown | Change the text and background colors of the chart. (Light, dark). |
Background Color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)" |
Display vertical grid lines | Boolean | Expression | Display vertical grid lines. |
Display horizontal grid lines | Boolean | Expression | Display horizontal grid lines. |
Grid lines color | Text | Expression | Change color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Legend font size | Number | Expression | Change font size of the legend. |
Legend position | Text | Dropdown | Change position of the legend. (Bottom, top, left, right). |
Fill Type | Text | Dropdown | Change fill type of the chart. (solid, gradient, pattern). |
Fill opacity | Number | Expression | Change the fill opacity of the chart. From 0.00 to 1.00 |
Show animation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | To set the height of the chart. |
Width | Number | Expression | To se the width of the chart. |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Node | Text | Expression | The name of nodes or labels of the chart. |
Node colors | Text | Expression | Colour for each node (You can use hexadecimal '#FF000' or 'rgba(255,0,0)' values. |
Source | Text | Expression | Initial Node (name) to start a link or connection. |
Target | Text | Expression | Final node (name) to stablish where the link ends. |
Value | Number | Expression | Value of the link or connection. |
Chart orientation. | Text | Dropdown | Chart orientation. (Horizontal, vertical). |
Width | Text | Expression | Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Height | Text | Expression | Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Custom padding | Boolean |
| Adds padding properties to customize the chart. |
Top padding | Number | Expression | To set the padding of the top. |
Left padding | Number | Expression | To set the padding of the left. |
Right padding | Number | Expression | To set the padding of the right. |
Bottom padding | Number | Expression | To set the padding of the bottom. |
Nodes align | Text | Dropdown | Alignment or flow direction of the nodes. (Left, Right, Justify). |
Hover focus | Text | Dropdown | What part of the series the chart focus on when the user hovers the mouse over the chart. (None, self, series, adjacency). |
Monochromatic | Boolean |
| Displays the chart with a single colour. |
Main color | Text | Expression | Single color for the whole chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Background color | Text | Expression | Background color for the chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Label legend position | Text | Dropdown | Where to display the legend of each label. (Top, bottom, left, right, inside). |
Label legend color | Text | Expression | Color for the labels legend. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Label legend size | Number | Expression | Numeric value for the label's legend size. |
Curveness | Number | Expression | The amount of curveness used in the links of the chart. (Values from 0 to 1) |
Scatter Chart uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. Scatter plots are used to observe relationships between variables.
You can find a more in depth explanation about the scatter on this page: https://echarts.apache.org/examples/en/editor.html?c=scatter-simple
Properties of Scatter Chart
The Stacked Columns Chart shows the contribution to trends in the data. This is done by stacking lines on top of each other. Stacked Line charts are used with data that can be placed in an order, from low to high. The charts are used when you have more than one data column that all adds up to the total trend.
Properties of Stacked Columns Chart
Scatter Aggregate Bar Chart uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. Scatter plots are used to observe relationships between variables. The aggregate bar, changes after a few moments and the values change to a bar, representing in a different visual way.
Properties of Scatter Aggregate Bar Chart
You can find a more in depth explanation about the stacked column on page:
You can find a more in depth explanation about the scatter aggregate bar on page:
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
X axis type
Text
Dropdown
Determines the type of X axis used.
X axis category
Text
Expression
Categories displayed on x-axis.
X axis date
Date
Expression
Date values displayed on x-axis.
Y axis value
Number
Expression
Values displayed on y-axis.
These are expected to be numeric values.
Series
Text
Expression
This field is used to create different series from the same data source.
It's not required.
Series color
Text
Expression
This field is used to set the color of the series. If empty a random color will be selected.
Hexadecimal Colors format Ex.: "#2E93fA"
Logarithmic scale
Boolean
Expression
Change scale to logarithmic scale.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Use opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position.
Max scale value
Number
Expression
Maximum value for the scale.
Min scale value
Number
Expression
Minimum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Marker size
Number
Expression
Size of the marker point (dot).
Default: 5
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
X axis tooltip
Boolean
Expression
Show x-axis tooltip.
Label decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart. (Light, dark).
Background color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.
Examples:
"#FFFFFF60" or "rgba(255, 255, 255, 0.6)"
Display vertical grid lines
Boolean
Expression
Display vertical grid lines.
Display horizontal grid lines
Boolean
Expression
Display horizontal lines on the grid.
Grid lines color
Text
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font size
Number
Expression
Change font size of the legend.
Legend position
Text
Dropdown
Change position of the legend. (Bottom, top, left, right).
Fill type
Text
Dropdown
Change fill type of the chart. (Solid, gradient, pattern).
Fill opacity
Number
Expression
Change the fill opacity of the chart.
From 0.00 to 1.00
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show animation
Boolean
Expression
Display animation on render.
Height
Number
Expression
Set height of the chart.
Type number.
Width
Number
Expression
Set width of the chart.
Type number.
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Series | Text | Expression | This field is used to create different groups from the same data source. It's not required. |
Categories | Text | Expression | To set the categories of the chart. |
Values | Number | Expression | Values to be used for each series. |
Horizontal | Boolean |
| To set or not in horizontal form., (yes, no). |
Height | Number | Expression | Set height of the chart. Type number. |
Value Prefix | Text | Expression | To set the value of the prefix. |
Value Postfix | Text | Expression | To set the value of the postfix. |
Tool Tip Prefix | Text | Expression | To set the prefix of the tooltip. |
Tool Tip Postfix | Text | Expression | To set the postfix of the tooltip. |
Show Data Labels | Boolean | Expression | Display the labels on render. |
Label Decimals | Number | Expression | To set the quantity of decimals of the labels. |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
X axis value | Number | Expression | Values for the x axis. |
Y axis value | Number | Expression | Values for the y axis. |
Series | Text | Expression | This field is used to create different series from the same data source. |
Series color | Text | Expression | Colors for the series. |
Show value | Boolean | Expression | Determines if the value is shown on the tooltip label. |
Y value prefix | Text | Expression | Display a prefix for Y values on tooltip. |
Y value postfix | Text | Expression | Display a postfix for Y values on tooltip. |
X value prefix | Text | Expression | Display a prefix for X values on tooltip. |
Y value prefix | Text | Expression | Display a prefix for Y values on tooltip. |
Value separator | Text | Expression | Value separator for the X and Y value in the scatter chart tooltip. (Default is a comma) |
Average to X | Boolean | Expression | By default, the bar chart uses the average of Y values, this setting changes it to use the average of X values. |
Transition animation duration | Number | Expression | This is the time interval that dictates how long the animation lasts. Time is set on milliseconds (1 second = 1000 milliseconds) |
Interval duration | Number | Expression | This is the time interval in which charts alternate. Time is set on milliseconds (1 second = 1000 milliseconds) |
Height | Number | Expression | Sets the height of the element, accepts all the css height values. |
Width | Number | Expression | Sets the width of the element, accepts all the css width values. |
Label decimals | Number | Expression | Number of decimals for all label numbers. |
Scatter chart symbols | Text | Dropdown | Different options for the symbols that are used to show the datapoints in the scatter chart. (Cirle, rect, roundrect, triangle, diamond, pin). |
A Treemap data visualization technique is used to display hierarchical data using nested rectangles; the treemap chart is created based on this technique of data visualization.
The treemap chart is used for representing hierarchical data in a tree-like structure. Data, organized as branches and sub-branches, are represented using rectangles, the dimensions and plot colors of which are calculated.
You can find a more in depth explanation about the treemap on this page: https://apexcharts.com/docs/options/plotoptions/treemap/
Properties of Tree Map Chart
In a step-line chart, points are connected by horizontal and vertical line segments, looking like steps of a staircase. Step line charts are used when it is necessary to highlight the irregularity of changes: for example, when changes in tax rates or interest rates are visualized.
You can find a more in depth explanation about the stepline on this page: https://apexcharts.com/docs/chart-types/line-chart/
Properties of Stepline Chart
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
Series
Text
Expression
This field is used to create different groups from the same data source.
Categories
Text
Expression
This field is used to create different groups by series values.
Values
Number
Expression
The values of the chart.
Chart Title Size
Text
Dropdown
To set the size of the font for the title. (H1, H2, H3, H4, H5).
Chart Title
Text
Expression
To set the title of the chart.
Height
Number
Expression
Can be set to number, percentage of container or pixels.
Width
Number
Expression
Can be set to number, percentage of container or pixels.
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Label Decimals
Number
Expression
Set number of decimals displayed.
Tick Amounts
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
X axis category
Text
Expression
Text categories displayed on x-axis.
Y axis value
Number
Expression
Numeric values displayed on y-axis.
Series
Text
Expression
This field is used to create different groups from the same data source.
It's not required.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position. (Use true or false)
Min scale value
Number
Expression
Minimum value for the scale.
Max scale value
Number
Expression
Maximum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Show markers
Boolean
Boolean expression to show dots at multiple points in the chart.
Marker size
Number
Expression
The size of each marker on the chart.
Marker shape
Text
Dropdown
The shape of the markers. (circle, rect, square).
Marker colors
Text
Expression
The main color of the markers.
Marker stroke colors
Text
Expression
Color for the perimeter of the marker.
Marker stroke width
Number
Expression
Numeric amount for the width of the perimeter line that wraps up the marker.
Height
Text
Expression
Can be set to auto, percentage of container or pixels.
Width
Text
Expression
Can be set to a percentage of container or pixels.
Tooltip
Boolean
Expression
Enables tooltip, shows details of the info when you hover over it.
Label Decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart. (light, dark).
Template
Text
Dropdown
A set of predefined color values for the chart groups. (palette1, palette2, palette3, palette4, palette5, palette6, palette7, palette8).
Lines Width
Number
Expression
Width/thickness of the lines of the chart.
Back ground color
Number
Expression
hange the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Show Grid
Boolean
Boolean to activate grid lines options.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid. (use true or false).
Grid lines vertical
Boolean
Expression
Display vertical lines on the grid. (use true or false).
Grid lines color
Text
Expression
Display vertical lines on the grid.
Legend Size
Number
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font Size
Number
Expression
Change font size of the legend.
Legend Position
Text
Dropdown
Change position of the legend. (bottom, top, left, right).
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show Animation
Display animation on render. (True or false)