Scatter Chart

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.

Last updated