Scatter Plot (Chart)

Tips & examples

A dynamic 2D scatter plot rendering unconstrained point clouds along X and Y axes, complete with symbol sizing, polar coordinate modes, point clustering, regression trend lines, legend aliases, and interactive toolbox utilities.

When to use

Plotting non-sequential numerical point clouds to observe correlations, clusters, distributions, or outliers across two independent coordinates.
Visualizing statistical relationships with advanced scatter options such as regression analysis trendlines, point clustering, or polar coordinate representations.

What you need

Requires an active Source Query. Select a numerical column property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate distinct multi-colored point series.

Database query records containing paired numerical attributes or continuous coordinates suitable for correlation analysis.

Examples

A quality control scatter plot analyzing product age (X-axis) versus failure rate (Y-axis) with regression analysis trendlines enabled.
A geographic or radial radar scatter visualization using polar coordinates across a 12x12 grid container.

Avoid

Squeezing scatter plots into small layout containers (under 6x6 grid units) — allocate at least 6x6 grid units, expanding up to 12x12 for high-density point clouds.
Using scatter charts when data points must follow a strict sequential connect-the-dots line trend — use line_chart instead.
Setting excessively large symbol sizes on dense datasets, which creates visual overlap clutter and obscures point distribution patterns.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Setup

View NamerequiredTextInside `dataSource`: Database view that supplies rows or form data.
Default: none
Label Column NamerequiredTextInside `dataSource.columns`: Selects the query column property used for the X-axis coordinate positioning.
Default: none
Value Column NamesrequiredList of TextInside `dataSource.columns`: Selects one or more numerical query columns for Y-axis coordinates. Adding multiple values plots distinct colored point series for comparison.
Default: []

Display Options

Hide LabeloptionalYes / no: When true, hides labels on scatter points.
Default: false
Hide XaxisoptionalYes / no: When true, hides the horizontal X-axis line and tick marks.
Default: none
Hide YaxisoptionalYes / no: When true, hides the vertical Y-axis line and scale values.
Default: none

Scatter Plot Options

Symbol SizeoptionalNumber: Sets the visual pixel diameter size of the individual point dots (defaults to 10).
Example 10
Default: 10
Enable PolaroptionalYes / no: Boolean switch transforming the entire rectangular Cartesian plane into a circular polar/radar coordinate grid.
Default: false
Enable ClusteringoptionalYes / no: Boolean switch grouping dense, nearby point clusters into consolidated visual nodes.
Default: false
Enable RegressionoptionalYes / no: Boolean switch calculating and rendering a statistical best-fit regression trend line through the point cloud.
Default: false

Legend Setup

PlacementoptionalOne of: top, end, bottom, start, hiddenInside `legend`

Label position relative to the input control.

Choices

top
end
bottom
start
hidden

Default: none

OrientoptionalOne of: vertical, horizontalInside `legend`

Controls the layout alignment direction of legend items.

Choices

vertical
horizontal

Default: none

Sort

SortoptionalList of Settings group: Configuration for sort.
Default: none

Data Display Limit

LimitoptionalNumber: Caps the maximum number of point items rendered on the scatter plot.
Default: none
X IntervaloptionalNumber or Text: Configures axis label step intervals using ‘auto’ or explicit numbers like 100 to control tick frequency.
Example auto
Default: none

Theme

Theme NameoptionalText: Selects predefined visual color palettes or unlocks custom color hex picker settings.
Default: none
ThemeoptionalKey-value map: Custom theme object for background, title, and legend colors when not using a named preset.
Default: none

Toolbox

ToolboxoptionalKey-value map: Toolbox buttons shown on the chart: save as image, restore, and data view.
Default: none

Filter

FilteroptionalCustom expression: Row filter applied when loading data.
Example { "combinator": "AND", "filters": [] }
Default: defaultExpressionValue

Inside dataSource: (dataSource)

ColumnsrequiredSettings group: Configuration for columns.
Default: {"valueColumnNames":[],"labelColumnName":""}

Inside `sort.$item`: (Each list item) ↕

AscrequiredYes / no: Configuration for asc.
Default: none
Field NamerequiredText: Configuration for field Name.
Default: none

Sizing

Minimum size: 3 × 3 grid cells (width × height).

Translatable labels

title — Header title text displayed prominently above the scatter chart container.

Accessibility

Renders canvas visual graphics with fallback ARIA chart roles (role='img') and accessible text descriptions. Turning on Data View allows screen reader users to consume underlying metric data in tabular format.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myScatterChart.<property>

loading boolean True while data is loading from the server. elements.myScatterChart.loading

When True while the chart is fetching. Use it to hold back a summary figure that would otherwise flash the wrong number.

data null Current payload rows or record object. elements.myScatterChart.data

error string Error message when the last operation failed. elements.myScatterChart.error

selected object Currently selected row(s) in the table. elements.myScatterChart.selected

When The record behind the point the user clicked. This is how you make a chart drive the rest of the page — point a table or detail panel at it to drill down. Empty until something is clicked.

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myScatterChart.selected

Replace myScatterChart with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "columns": {
        "labelColumnName": "labelColumnName",
        "valueColumnNames": [
          "valueColumnNames"
        ]
      }
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "columns": {
        "labelColumnName": "labelColumnName",
        "valueColumnNames": [
          "valueColumnNames"
        ]
      }
    },
    "showBackground": false,
    "isStacked": false,
    "filter": "@@expression:'value'",
    "sort": [
      {
        "fieldName": "fieldName",
        "asc": false
      }
    ],
    "limit": 0,
    "xInterval": 0,
    "toolbox": {
      "exampleKey": {
        "exampleKey": {}
      }
    },
    "themeName": "themeName",
    "theme": {
      "exampleKey": {}
    },
    "legend": {
      "placement": "top",
      "orient": "vertical"
    },
    "hideLabel": false,
    "hideLegend": false,
    "hideYAxis": false,
    "hideXAxis": false,
    "enableClustering": false,
    "clusteringMethod": "hierarchicalKMeans",
    "clusterCount": 0,
    "symbolSize": 0,
    "enablePolar": false,
    "enableRegression": false,
    "regressionType": "linear",
    "polynomialOrder": 0
  }
}

Ready-made setups

Correlation Scatter Chart with Regression Analysis ↕

Configures a 12x6 scatter plot mapping product age against failure rate, featuring regression trendlines, custom symbol sizing, and image export tools.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
  "config": {
    "setup": {
      "sourceQuery": "getQualityControlMetrics",
      "labelProperty": "product_age_months",
      "valueProperties": [
        "failure_rate_percentage"
      ]
    },
    "display_options": {
      "showLabel": false,
      "showXAxis": true,
      "showYAxis": true
    },
    "scatter_plot_options": {
      "symbolSize": 8,
      "enablePolarCoordinates": false,
      "enableClustering": true,
      "enableRegressionAnalysis": true
    },
    "legend_labels": {
      "legendLabelAliases": {
        "failure_rate_percentage": "Failure Rate (%)"
      }
    },
    "legend_setup": {
      "legendPlacement": "Top",
      "legendOrientation": "Horizontal"
    },
    "translation": {
      "title": "Age vs. Failure Rate Correlation"
    },
    "data_display_limit": {
      "dataLimit": "50",
      "labelInterval": "auto"
    },
    "toolbox": {
      "enableSaveAsImage": true,
      "enableClearSelection": true,
      "enableDataView": true
    },
    "filter": {
      "filterExpression": "{\n  \"combinator\": \"AND\",\n  \"filters\": []\n}"
    }
  }
}