Scatter Chart

Scatter Chart is also called a correlation chart. It plots two potentially related variables on a coordinate graph, showing the general trend of the dependent variable (vertical axis values) changing with the independent variable (horizontal axis values), and is used to study the relationship between variables.

When you don't know the relationship between two factors or the relationship is unclear, you can use a scatter chart to investigate and confirm it. It's important to note that when using scatter charts to investigate relationships between factors, you should fix other factors that might affect these two factors as much as possible to ensure the results from the scatter chart are accurate.

Advantages: Scatter charts are ideal for processing value distributions and data point clusters.

Disadvantages: Scatter charts appear relatively messy and can only clearly show correlations, distributions, and aggregations; other information cannot be well presented.

Settings

Data Settings

Setting Item	Description
Data Source	Select the data source for the scatter chart. Multiple data sources can be added through the Data Source menu to achieve multi-chart overlay
Coordinate System Type	Choose which coordinate axis to display the data in. Options: Polar Coordinate System, 2D Rectangular Coordinate System. See the end of the article for supplementary polar coordinate information
Name Field	Select a field returned by the data source. This field is used to display the name of the scatter label in the scatter chart, usually combined with the Floating Display menu for display
Horizontal Axis Field	In the rectangular coordinate system, select a field returned by the Data Source menu and set it as the horizontal axis of the scatter chart
Vertical Axis Field	In the rectangular coordinate system, select a field returned by the Data Source menu and set it as the vertical axis of the scatter chart
Radius Field	In the polar coordinate system, select a field returned by the Data Source menu and set it as the radius value of the polar coordinate. See the end of the article for supplementary polar coordinate information
Angle Field	In the polar coordinate system, select a field returned by the Data Source menu and set it as the grouping angle of the polar coordinate. See the end of the article for supplementary polar coordinate information

Chart Settings

Setting Item	Description
X Coordinate Axis	Select the horizontal axis where the scatter chart is located. Multiple X axes can be added in the Horizontal Axis menu
Y Coordinate Axis	Select the vertical axis where the scatter chart is located. Multiple Y axes can be added in the Vertical Axis menu
Color Allocation Type	Configure the color effect of the graphics in the scatter chart. Options: Allocate colors from the palette according to the chart, Allocate colors from the palette according to the data item. For multiple chart aggregations, you can choose allocation by chart; for a single chart, you can choose allocation by data item. Specific color values can be adjusted in the palette under the Style menu
Shape Style	Configure the style of the scatter shape. Options: Hollow Circle, Dot, Rectangle, Rounded Rectangle, Triangle, Diamond, Needle, Arrow, None
Shape Size	Configure the size of the numeric item graphics
Shape Rotation Angle	Configure the rotation angle of the numeric item graphics

Label Settings

Setting Item	Description
Display Label	Enable or disable label display on the scatter chart
Display Content Expression	Custom expression syntax can be edited to implement complex scene content display. Display priority is lower than [Display Content]
Display Content	Editable label display content. Complex expression syntax other than prompt content is not supported. Display priority is higher than [Display Content Expression]
Position	Choose the display position of the label on the scatter chart graphics
Distance from Graphics	Set the distance of the label from the value points in the scatter chart
Label Rotation	Set the rotation angle of the label
Text Offset X	Set the distance of the label from the X axis
Text Offset Y	Set the distance of the label from the Y axis
Color	Set the color of the label text
Background Color	Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, height in the text style to take effect
Text Style	Set the label text to italic or normal mode
Font Weight	Set the label font weight. Options: Default, Bold, Very Bold, Light
Font	Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW
Font Size	Set the label font size. The font size should not be less than 12 or exceed 100
Horizontal Alignment	Set the horizontal alignment of the label text, including four methods: auto, left, center, and right
Vertical Alignment	Set the vertical alignment of the label text, including four methods: auto, top, center, and bottom
Line Height	Set the line height of the label text. It takes effect when Exceed Width Handling selects the line break option
Padding	Set the distance length of the label text within the background box
Width	Set the maximum display width of the label text. It is generally used together with Exceed Width Handling for line break configuration
Height	Set the display height of the label text. It only affects the text background height, not the text itself
Exceed Width Handling	Processing method when the label exceeds the maximum width, including line break and truncation with ellipsis. If set to none, the maximum width will not take effect
Stroke Width	Set the stroke width of the label background image. It takes effect after setting the stroke color
Stroke Color	Set the stroke color value of the label background
Stroke Radius	Set the stroke radius of the label background
Shadow Color	Set the shadow color of the label background. It takes effect after setting the label background color and shadow size
Shadow Size	Set the shadow size of the label background
Shadow Horizontal Offset	Set the horizontal offset distance of the label background shadow
Shadow Vertical Offset	Set the vertical offset distance of the label background shadow

Line Style

The line style in the scatter chart refers to the style of the scatter graphics, which varies according to different scatter shapes (Hollow Circle, Dot, Rectangle, Rounded Rectangle, Triangle, Diamond, Needle, Arrow).

Setting Item	Description
Color	Set the color effect of the scatter lines
Border Color	Set the color effect of the scatter border
Stroke Type	Configure the scatter stroke type. Options: Solid Line, Dashed Line, Dash-Dot Line
Stroke Width	Set the stroke width of the scatter
Stroke Radius	Set the stroke radius of the scatter
Shadow Color	Set the shadow color of the scatter
Shadow	Set the shadow size of the scatter
Shadow Horizontal Offset	Set the horizontal position of the scatter shadow
Shadow Vertical Offset	Set the vertical position of the scatter shadow
Opacity	Set the opacity of the scatter. The opacity value ranges from 0 to 1

Label Layout

Setting Item	Description
Hide Overlapping Labels	When enabled, labels with overlapping content will be hidden
Overlapping Offset Direction	When labels overlap, you can choose the direction of label displacement, either horizontal or vertical displacement

Highlight Settings

Setting Item	Description
Disable Highlight	After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position
Highlight Behavior	Set the interactive style of highlight display
Fade Range	Set the fade selection range of the interactive interface when highlighting. Three methods are provided: fade coordinate system, fade chart, or global fade

Events

Setting Item	Description
Non-clickable	When enabled, all label data in this chart cannot be clicked; when disabled, corresponding data click interactive events can be set
Call Automation on Click	You can select the corresponding automation to implement related data label click interaction events, such as opening the corresponding data form details or other web links after clicking
Call Automation on Double Click	The function is the same as click call, but the interaction is triggered by double-click instead of single-click. Click and double-click events can be set simultaneously

Polar Coordinate Supplement

Simply put, polar coordinates describe positions using angles and lengths, which differs significantly from how line charts and bar charts are displayed in rectangular coordinates. Polar coordinates are generally used in line charts, bar charts, and scatter charts.

When using polar coordinates, you need to first understand the following content: Polar coordinates generally have two coordinate axes, called polar radius and polar angle, corresponding to the radial (radius) axis and angular (arc) axis of the polar coordinate respectively. At the same time, there are four types of coordinate axis measurement: value axis, category axis, time axis, and logarithmic axis. Choosing different types of coordinate axes will result in different data scales displayed in the chart. The usage scenarios of the four coordinate axes are as follows:

Setting Item	Description
Value Axis	'value': Value axis, suitable for continuous data, using the length of the radius to represent the size of the value
Category Axis	'category': Category axis, suitable for discrete category data, using fixed radius length to represent each category value
Time Axis	'time': Time axis, suitable for continuous time series data. Compared to value axis, time axis has time formatting, and the radius reflects the order changes of time points
Logarithmic Axis	'log': Logarithmic axis, suitable for logarithmic data, commonly used in line charts for dual value axis presentation

Let's take a scatter chart as an example to create a simple polar coordinate scatter chart showing the order distribution of XXX Company from September to December 2022. The example steps are as follows:

1. Create a dashboard card and add a data source in the Data Source menu. Since this scatter chart only needs to view all order distributions, you can directly select the sales list without aggregate query;
2. Add a scatter chart in the Chart menu, and select Polar Coordinate System in the data setting coordinate system type;
3. Select order total amount (single order total amount) for the Radius Field, order date for the Angle Field, and customer name for the Name Field (the name field generally refers to the radial axis value name and can be used with floating prompts);
4. In the Polar Coordinate menu, you can modify parameters such as axis and grid line size and color to optimize chart display details. Note that polar coordinates generally default to value axis for the radial axis and category axis for the angular axis. You can flexibly adjust the axis type configuration according to different business scenarios. In this chart, note that order dates are not continuous time series data, so there's no need to select time axis for the angular axis; category axis is sufficient;
5. Enable the display floating prompt button in the Floating Prompt menu;
6. Hide the original horizontal and vertical coordinate axes in the Horizontal Axis and Vertical Axis menus to complete the final polar scatter chart configuration.