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:
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.
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.
You can find a more in depth explanation about the Heat map on this page:
Properties of Heat Map
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.
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
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
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).
(Palette1, Palette2, Palette3, Palette4, Palette5, Palette6, Palette7, Palette8, Palette9, Palette10).
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
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.
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
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%.
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.
You can find a more in depth explanation about the bubble on this page: https://apexcharts.com/javascript-chart-demos/bubble-charts/
Properties of Bubble Chart
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.
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.
You can find a more in depth explanation about the card with chart on this page: https://apexcharts.com/javascript-chart-demos/dashboards/modern/
Properties of Card
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).
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.
You can find a more in depth explanation about the Effect Scatter on this page:
https://echarts.apache.org/examples/en/editor.html?c=scatter-effect
Properties of Effect Scatter Chart
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.
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
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.
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.
You can find a more in depth explanation about the line, area and bar on this page:
Properties of Line & Bar Chart
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.
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.
You can find a more in depth explanation about the polar area on page:
Properties of Polar Area Chart
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 page:
Properties of Nested Pie 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 page:
Properties of Profit Chart
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.
You can find a more in depth explanation about the rosetype pie on page:
Properties of Rosetype Pie Chart
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 page:
Properties of Polar Bar 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.
You can find a more in depth explanation about the range bar on page:
Properties of Range Bar 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 page:
Properties of Radial Bar Chart
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).
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
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
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
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
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
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
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/
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
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.
You can find a more in depth explanation about the Sankey energy on this page: https://echarts.apache.org/examples/en/editor.html?c=sankey-nodeAlign-left
Properties of Sankey Energy 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)
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.
You can find a more in depth explanation about the stacked column on this page: https://apexcharts.com/javascript-chart-demos/column-charts/stacked/
Datamodel
The Stacked Columns Chart uses a single list or filtered list for its source values. This list has the fields for the Series and Categories on each row. From this list a field is selected for the 'Values', the widget will then iterate over this list and use the indicated field to generate the values shown in the widget. This field must be numeric type. The categories and series properties are then set to respective category and series field from the source list. So this list will contain the following:
Numeric field, for holding the values to show on the stack - per specific category and series
Text field, to hold the specific Category value that is displayed along the other axis from the values: for example, the Month Name to show values per month.
Text field, to hold the specific Series value for which the Value should be applied (like years, and if they hold a numeric value, just use the ToString([field]) in the widget property) for example to show the different Total Values for the same month in Categories but with a different color per year.
Properties of Stacked Columns Chart
Property Name
Data type
Type
Description
Data source
List
Data Model
Data sourcelist 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.
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.
You can find a more in depth explanation about the scatter aggregate bar on this page: https://echarts.apache.org/examples/en/editor.html?c=scatter-aggregate-bar
Properties of Scatter Aggregate Bar Chart
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).
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
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.
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.
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
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)
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
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.
(palette1, palette2, palette3, palette4, palette5, palette6, palette7, palette8).
