Setting Properties of the Scatter Chart Widget

The scatter chart widget displays data in scatters. Similar to a scatter chart, a bubble chart uses bubbles to display data.

Figure 1 Setting properties
Click to enlarge

Basic

Widget Label: Label of a widget, which is displayed on the advanced page.
Widget Name: Name of a widget, which is the unique identifier of the widget on the page.

Position

Left: Left margin of the widget in the canvas. Unit: px.
Top: Top margin of the widget in the canvas. Unit: px.
Layout Width: Width of the widget. Unit: px.
Layout Height: Height of the widget. Unit: px.
Stacking Order: Order of the widget among others. The default value is 1. The widget with the largest value is on the top. If you want to move a widget to the bottom of a stack, set the parameter to 0.
Auto Height: whether the widget height changes with the width.
open: If this option is selected, the page adaptation function is displayed in the lower part.
Page Adapter: Select open to enable height adaptation for the widget. This property enables the position of other widgets below the page to be automatically adjusted based on the height of the widget. One page supports only one widget.

Border

Border of the widget. Options: Full and Corner.

Full border
- Style: Style of the widget border. Options: Solid, Dotted, Dashed, and Double.
- Width: Border width, in pixels.
- Color: color of the widget border.
- Radius: radian of the four corners of the widget border, in pixels.
Corner
- Width: Border width, in pixels.
- Length: Border length, in pixels.
- Color: color of the widget border.
- Radius: radian of the four corners of the widget border, in pixels.
- Padding: Spacing between the widget border and the chart, in pixels.

Background

Style: Background style. Options: Normal, Center, and Stretch.
Image URL: Add images for this widget. The image can be in JPG, JPEG, PNG, or GIF format, and the image size cannot exceed 50 MB. The suggested image size is 800 x 800.
Color: Background color of the widget.

Advanced Settings

Right-click the widget and choose Setting from the shortcut menu to configure the scatter chart or bubble chart.

Data Series: Data attribute configuration, such as the data mark graph, mark size, mark color, and whether to set shadow for scatter icons. Click + to add a data series. If the number of configured data series is greater than the actual number, the extra data series are not displayed.
- Marker Graphics: a graph marked by scatters or bubbles.
- Size: size of the scatter marker. This parameter is unavailable for bubble charts and the marker size cannot be changed.
- Color Setting: You can select solid color, linear gradient, or radial gradient.
- Graphic Transparency: The value ranges from 0 to 1. 0 indicates that the markers are invisible, whereas 1 indicates that the markers are fully opaque.
- Graphic Label/Show Label: After the Show label switch is turned on, the label is displayed. You can set the color, position, and font size of the label.
- Chart Callouts And Graticules: You can highlight the maximum or minimum value or add an average line.
X Axis Setting
- X Axis Type: Continuous data (data of the numeric type), category axis (data of the character and character string types), and time axis (data of the date and time types).
- Segmentation: Number of segments the axis is divided into. The actual number of segments will be adjusted to ensure that the tick labels will be displayed clearly.
- Maximum Value Setting: You can configure the Max and Min values of the axis and click Clear to restore the default values.
- X Axis Name Setting/Axis Name: Axis name.
- X Axis Name Setting/Font Size: Font size of the axis name.
- X Axis Name Setting/Color: Font color of the axis name.
- X Axis Name Setting/Tick label Rotation Angle: You can configure the rotation angle of the tick labels so they will not be overlapped.
- Axis Setting/Axis Display: Whether to display the axis.
- Axis Setting/Axis Line Display: Whether to display the axis line.
- Axis Setting/Scale Display: Whether to display the scale.
- Axis Setting/Line Color: Color of the axis.
- Axis Setting/Tick label Color: Color of the scale label.
- X axis label fontsize: Font size of X-axis labels.
- Gridline Setting/Show: Whether to display the axis grid line.
- Gridline Setting/Type Of Line: Type of the axis grid line.
- Gridline Setting/Color: Color of the axis grid line.
Y Axis Setting
- Y Axis Type: Continuous data (data of the numeric type), category axis (data of the character and character string types), and time axis (data of the date and time types).
- Maximum Value Setting: You can configure the Max and Min values of the axis and click Clear to restore the default values.
- Y Axis Name Setting/Axis Name: Axis name.
- Y Axis Name Setting/Font Size: Font size of the axis name.
- Y Axis Name Setting/Color: Font color of the axis name.
- Axis Setting/Axis Display: Whether to display the axis.
- Axis Setting/Axis Line Display: Whether to display the axis line.
- Axis Setting/Scale Display: Whether to display the scale.
- Axis Setting/Line Color: Color of the axis.
- Axis Setting/Tick label Color: Color of the scale label.
- Y axis label fontsize: Font size of Y-axis labels.
- Gridline Setting/Show: Whether to display the axis grid line.
- Gridline Setting/Type Of Line: Type of the axis grid line.
- Gridline Setting/Color: Color of the axis grid line.
Legend: Set the legend in the widget. The legend text comes from the value of name in the dataValue data model.
- Show Legend: Whether to display the legend.
- Location: Position of the legend.
- Small Icon: Shape of the small icon of the legend.
- Text Style Setting/Font Size: Font size of the legend text.
- Text Style Setting/Text Color: Color of the legend text.
- Text Style Setting/Font Family: Font of the legend text.
- Text Style Setting/Font Weight: Font width of the legend text.
- Text Style Setting/Text Style: Style of the legend text.
Widget Title: Widget title.
- Title Setting: Whether to display the widget title.
- Content: Content of the widget title.
- Location: Position of the widget title.
- Background Color: Background color of the title.
- Font Size: Font size of the widget title.
- Font Family: Font series of the widget title.
- Text Color: Text color of the widget title.
Chart Information
- Chart Background Color: Background color of the chart.
- Round Corner: Round corner of the chart border.
- Coordinate System Position: Distance of the coordinate system to the left, right, top, and bottom.