Scatter Chart

Configurable options for the scatter chart.

A scatter chart is a type of chart used to display the relationship between two variables. By plotting data points on a coordinate plane, scatter charts help us observe trends, correlations, and outliers between variables.

Suitable scenarios include:

  1. Displaying the relationship between two variables: This includes correlation analysis, which shows whether there is a linear or nonlinear relationship between two variables, and trend analysis, which helps determine if there is an obvious increase, decrease, or other patterns between the variables.
  2. Identifying outliers: Scatter charts can help us easily identify outliers or anomalies in the dataset.
  3. Multivariable analysis: When there are multiple data series in the dataset, different point styles (such as color, shape, size) can be used to represent different variables. This allows for comparison of the relationships between multiple variables in one scatter plot.
  4. Exploratory data analysis: During the early stages of exploring data, scatter charts are a common method for discovering data patterns, trends, and distributions. They can help determine whether further statistical methods, like regression analysis, should be used.

Unlike other charts, scatter charts have unequal x-axis values for different data series. Therefore, in the provided data, different data series use the same data column and are distinguished by grouping (Groupby) the column to separate the different series.

For example, the data below can be grouped by the group column:

[
  { "x": "1", "y": 186, "z": 13, "group": "desktop" },
  { "x": "2", "y": 200, "z": 44, "group": "mobile" },
  { "x": "2", "y": 305, "z": 78, "group": "desktop" },
  { "x": "2.5", "y": 80, "z": 31, "group": "mobile" },
  { "x": "3", "y": 120, "z": 50, "group": "mobile" },
  { "x": "4", "y": 190, "z": 46, "group": "mobile" },
  { "x": "4", "y": 237, "z": 69, "group": "desktop" },
  { "x": "5", "y": 130, "z": 22, "group": "mobile" },
  { "x": "6", "y": 209, "z": 77, "group": "desktop" },
  { "x": "7", "y": 73, "z": 32, "group": "desktop" }
]

Basic Mode

In basic mode, drawing a scatter chart requires:

  1. X-axis, Y-axis, Size Factor (Z), and Groupby: Select columns using the dropdown menu. X and Y represent the coordinates of the data points, and they are mandatory. Z is used to represent the size of the data points, and Groupby is used to group different data series. These are optional.
  2. Color Scheme: select a color scheme from the dropdown. The default is the "Default" color scheme.
  3. Template: select a template using the "Change" button. If not selected, the default template is used.
  4. Visibility: specify whether the X-axis, Y-axis, tooltip, and legend are visible. By default, the X-axis and tooltip triggered by the cursor are displayed.

Advanced Mode

In advanced mode, more option values can be adjusted.

Axis

Includes the X and Y axes, as well as the size factor and groupby.

For X and Y:

  • Corresponding Columns (X, Y): Select columns from the data using the dropdown menu. Both are required and represent the coordinates of the data points.
  • Visibility: controlled via the toggle button above.
  • Line Color: the default is , indicating that the axis line is not displayed. You can click to select a color from the color palette or enter a HEX value to specify your preferred color. indicates using the default color.
  • Line Width: specifies the thickness of the axis line.

Ticks and labels:

  • Label: configure the color, font weight, and rotation angle of the labels.
  • Format: use formulas to process the label text.
  • Line: by default, it is not displayed. When enabled, you can configure the thickness and length of the ticks.
  • Layout: configure the minimum distance between ticks and the spacing between ticks and labels.
  • Numeric: when the axis column corresponds to numeric data, you can specify the number of ticks.
  • Inside: controls whether the ticks and labels are displayed inside or outside the axis.

Size Factor (Z): Used to control the size of the data points, and it is optional. Z has a value range, with a minimum of 10 and a maximum of 1000. When no column is selected for Z, it defaults to 10.

Groupby: Used to group different data series, and it is optional. When no column is selected, all data is treated as a single data series.

Chart/Scatter

The number of scatter plots in the chart corresponds to the number of data groups. When groupby is set, the same number of scatter plots will be automatically generated.

For each scatter plot, the options include:

  • Dot: configure the style of the data points. You can configure the fill color. If you need to adjust the size of the points, you can configure it through the minimum value option of the size factor (Z).
  • Stroke: configure the style of the data point outlines. You can configure the color, thickness, and dash type.
  • Shape: Includes circle, cross, diamond, square, pentagon, triangle, and Y-shape.

Layout

Includes:

  • Margin: configure the top, bottom, left, and right margins of the drawing area (including the axis).
  • Grid: configure whether the horizontal and vertical gridlines are displayed.

Description

Used to configure the display of supplementary information for the chart.

  • Title: configure the title of the chart, located at the top of the chart.
  • Description: configure the description of the chart, located below the title.
  • Footer: configure the footer text of the chart, located at the bottom of the chart.
  • Tooltip: configure whether to display the tooltip, its offset, and whether the cursor line is shown.
  • Legend: configure whether to display the legend, its position on the chart. By default, it is positioned at the bottom of the chart, below the X-axis and above the footer text.
Horizontal Bar ChartPie Chart