This topic describes the style and configuration of the Basic Scatter Chart widget for mobile applications.
Chart style
A basic scatter chart displays data as a collection of points. You can customize the x-axis, y-axis, and point styles. The chart supports multiple data series, tooltips, and animation effects. Use a scatter chart to show differences in discrete data over time.
Configuration panel
- Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
Chart
Custom Margins: The margins between the chart area and the top, bottom, left, and right borders of the widget, measured in px. Click the
icon to show or hide the custom margins.Outline: The outline color and width for the points.
Legend: The style of the chart legend. Click the
icon to show or hide the legend.Parameter
Description
Click to filter
Turn on this switch to filter data by series. If the widget is configured with multiple data series, you can click a series in the legend on a mobile device to select or deselect it. This lets you filter which series are displayed in the application. If this switch is turned off, you cannot filter the series, and all series are displayed.
Unselected Color
The legend color for unselected series.
Layout
The layout of the legend. You can adjust the position and alignment of the legend.
Marker Shape
The shape of the legend markers. You can select Circle or Square.
Text
The text style for the legend.
Font Size: The font size of the legend text.
Font Weight: The font weight of the legend text.
Color: The color of the legend text.
Alignment: The alignment of the legend text. You can select Align Center, Align Left, or Align Right.
Axes: The widget axes include the x-axis and the y-axis.
x-axis
Show: Turn on this switch to show the x-axis. Turn off this switch to hide it.
Type: The data type for the x-axis labels. You can select Numeric, Category, or Time.
NoteA mismatch between the data format and the selected data type will cause the widget to display incorrectly.
Parameter
Description
Numeric
Supports numeric data types such as integers and floating-point numbers.
Category
Supports category data types such as characters and strings.
Time
Supports time data types. You must configure the data format.
Tick Count: The number of ticks to display on the x-axis.
Optimize Ticks: Turn on this switch to automatically optimize the ticks on the x-axis. If this switch is off, you can manually set the minimum and maximum values for the ticks.
Padding: The padding ratio at both ends of the x-axis. The value ranges from 0 to 1.
Axis Label: The style of the x-axis labels. Click the
icon to show or hide the x-axis labels.Parameter
Description
Display Format
The display format of the x-axis labels. When the x-axis type is numeric, you can select Original Value, 11 (integer), 11.1 (floating-point Number), or 11.11 (floating-point Number). When the x-axis type is Time, you can select from different time display formats. This configuration is displayed only when the x-axis type is set to Numeric or Time.
Label Offset
The vertical offset of the x-axis labels, in px.
Text
The font size, font weight, color, and alignment of the x-axis label text.
Grid: The style of the x-axis gridlines. Click the
icon to show or hide the x-axis gridlines.Parameter
Description
Color
The color of the x-axis gridlines.
Width
The width of the x-axis gridlines.
Line Style
The line style for the x-axis gridlines. You can select Solid line, Dashed line, or Dotted line.
Axis Line: The style of the x-axis line. Click the
icon to show or hide the x-axis line.Parameter
Description
Color
The color of the x-axis line.
Width
The width of the x-axis line.
Line Style
The line style for the x-axis line. You can select Solid line, Dashed line, or Dotted line.
Tick Line: The style of the x-axis tick lines. Click the
icon to show or hide the x-axis tick lines.Parameter
Description
Color
The color of the x-axis tick lines.
Line Style
The line style for the x-axis tick lines. You can select Solid line, Dashed line, or Dotted line.
Width
The width of the x-axis tick lines.
Length
The length of the x-axis tick lines.
y-axis
Show: Turn on this switch to show the y-axis. Turn off this switch to hide it.
Type: The data type for the y-axis labels. You can select Numeric, Category, or Time.
NoteA mismatch between the data format and the selected data type will cause the widget to display incorrectly.
Parameter
Description
Numeric
Supports numeric data types such as integers and floating-point numbers.
Category
Supports category data types such as characters and strings.
Time
For the time data type, you must configure the data format.
Tick Count: The number of ticks on the y-axis.
Optimize Ticks: Turn on this switch to automatically optimize the ticks on the y-axis. If this switch is off, you can manually set the minimum and maximum values for the ticks.
Padding: The padding ratio at both ends of the y-axis. The value ranges from 0 to 1.
Axis Label: The style of the y-axis labels. Click the
icon to show or hide the y-axis labels.Parameter
Description
Display Format
The display format for the Y-axis labels. When the Y-axis type is Numeric, you can select Original Value, 11 (integer), 11.1 (floating-point Number), or 11.11 (floating-point Number). When the Y-axis type is Time, you can select from different time display formats. This configuration is displayed only when the Y-axis type is set to Numeric or Time.
Label Offset
The vertical offset of the y-axis labels, in px.
Text
The font size, font weight, color, and alignment of the y-axis label text.
Grid: The style of the y-axis gridlines. Click the
icon to show or hide the y-axis gridlines.Parameter
Description
Color
The color of the y-axis gridlines.
Width
The width of the y-axis gridlines.
Line Style
The line style for the y-axis gridlines. You can select Solid line, Dashed line, or Dotted line.
Axis Line: The style of the y-axis line. Click the
icon to show or hide the y-axis line.Parameter
Description
Color
The color of the y-axis line.
Width
The width of the y-axis line.
Line Style
The line style for the y-axis line. You can select Solid line, Dashed line, or Dotted line.
Tick Line: The style of the y-axis tick lines. Click the
icon to show or hide the y-axis tick lines.Parameter
Description
Color
The color of the y-axis tick lines.
Line Style
The line style for the y-axis tick lines. You can select Solid line, Dashed line, or Dotted line.
Width
The width of the y-axis tick lines.
Length
The length of the y-axis tick lines.
Series
Data Series: Click the
icon to add a data series or the icon to delete a data series. Click the or icon to arrange the data series. Click the icon to copy the selected data series and add a new series with the same configuration.Point Style: The style of the points in this series.
Parameter
Description
Color
The color of the points.
Shape
The shape of the points. You can select Solid circle or Square.
Size
The size of the points.
Other
Easing Animation: The animation effect for the chart. Click the
icon to enable or disable the animation.Parameter
Description
Easing Effect
The easing effect for the animation. Choose from a variety of common easing effects.
Entry Animation Duration
The duration of the animation when the widget first renders, in ms.
Update Animation Duration
The duration of the animation when the widget's data is updated, in ms.
Tooltip: The style of the tooltip that appears when you hover over or click a point on the preview or published page. Click the
icon to enable or disable the tooltip.Parameter
Description
Series Name
The font size and color of the series name in the tooltip.
Data Value
The font size and color of the data value in the tooltip.
Auxiliary Line
Click the
icon to enable or disable the tooltip auxiliary line.Width: The width of the tooltip auxiliary line.
Line Style: The line style for the tooltip auxiliary line. You can select Solid line, Dashed line, or Dotted line.
Color: The color of the tooltip auxiliary line.
Background Box
The style of the tooltip's background box.
Border Radius: The border radius of the tooltip's background box, in px. A value of 0 creates a square box with no rounded corners. A larger value creates a more rounded corner.
Color: The background color of the tooltip.
icon to add a data series or the 
icon to delete a data series. Click the 
or 
icon to arrange the data series. Click the 
icon to copy the selected data series and add a new series with the same configuration.Data panel
Field descriptions
Field | Description |
| The x-axis data for each point in the scatter chart. The type and format of this field must match the data type and format set for the x-axis labels in the configuration. |
| The y-axis data for each point in the scatter chart. The type and format of this field must match the data type and format set for the y-axis labels in the configuration. |
| (Optional) The series value for the scatter chart. |
| Parameter | Description |
| Controlled Mode | If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off. |
| Auto Data Request | After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests. |
| Data Source | In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data. |
| Data Filter | If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter. |
| Data Response Result | The response to a data request. If the data source changes, you can click the  icon next to Data Response Result to view the data response in real time. |
Interaction panel
Select Enable to turn on the widget's interaction features. Clicking a point on the scatter chart triggers a data request. A callback value is returned to dynamically load data for the clicked point. By default, the x value from the data is returned. For more information, see How to configure the callback ID for a Ticker Board widget.
Blueprint Editor interaction configuration
On the mobile canvas editor page, right-click a component in the Layers panel and select Export to Blueprint Editor.
- Click the icon in the upper-left corner of the page.
On the Blueprint Editor configuration page, click the Basic Scatter Chart widget in the import node panel. The widget's configuration parameters appear on the canvas, as shown in the following figure.
Events
Event
Description
When data request is successful
An event that is triggered when the data API request is successful and the returned data has been processed by the filter. The processed data is also returned in JSON format. For a data example, see the Data Response Result section on the Data tab of the widget's configuration panel in the canvas editor.
Basic scatter chart API description request failed
An event that is triggered when the data API request fails due to a network issue or an API error. The processed data is also returned in JSON format. For a data example, see the Data Response Result section on the Data tab of the widget's configuration panel in the canvas editor.
When a data item is clicked
An event that is triggered when a point on the scatter chart is clicked. The data item corresponding to that point is also returned.
Actions
Action
Description
Basic Scatter Chart API Request
Sends a new request to the server for data. Data from an input data processing node or a layer node is used as a parameter. For example, if the scatter chart's API data source is set to
https://api.testand the data passed to the Request data action is{ id: '1'}, the final API request ishttps://api.test?id=1.Import Basic Scatter Chart API
Processes and imports data in the format required by the widget, and then rerenders the widget. This action does not send a new request to the server. For a data example, see the Data Response Result section on the Data tab of the widget's configuration panel in the canvas editor.
icon in the upper-left corner of the page.