Bubble chart (versions earlier than v3.0)

Chart style

A bubble chart is a variation of a scatter plot. It uses bubbles to represent data and allows you to customize the bubble size, providing an intuitive way to visualize differences in discrete data across multiple time periods.

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.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Global settings

  • Font family: The font family for all text in the widget. The default is Microsoft YaHei.

  • Margin

    • Top: The distance from the chart to the widget's top border, in pixels.

    • Bottom: The distance from the chart to the widget's bottom border, in pixels.

    • Left: The distance from the chart to the widget's left border, in pixels.

    • Right: The distance from the chart to the widget's right border, in pixels.

  • Max Records: The maximum number of data records to load for layout, rendering, and calculation. This limit ensures optimal performance.

• X-axis: The style of the widget's x-axis. You can click the icon to show or hide the x-axis.

  • Text

    • Color: The color of the x-axis text.

    • Font size: The font size of the x-axis text. The value ranges from 10 to 100.

    • Font weight: The font weight of the x-axis text.

  • Axis label: The style of the x-axis labels. You can click the icon to show or hide the labels.

    Note

    A mismatch between the data format and the specified format settings can cause the widget to display incorrectly.

    • Data type: The data type of the x-axis labels. Options include:

      • Numeric: Supports numeric data such as integers and floating-point numbers.

      • Category: Supports categorical data such as characters and strings.

      • Time: Supports time-based data. You must configure the data format.

    • Data format: The format of the source data. This option applies only to the time data type and must match the incoming data, for example, %Y/%m/%d %H:%M:%S.

    • Display format: The format for displaying the data on the axis. This option applies to time and numeric data types. For time, follow the %m/%d%Y%H:%M:%S pattern. For integers, use d. For floating-point numbers, use .1f.

    • Max: The maximum value of the x-axis. You can enter a custom value. The default is auto, which calculates a suitable value based on the data's minimum and maximum values, and the number of labels.

    • Min: The minimum value of the x-axis. You can enter a custom value. The default is auto, which calculates a suitable value based on the data's minimum and maximum values, and the number of labels.

    • Unit: The unit of the x-axis.

    • Quantity: The number of x-axis labels.

    • Angle: The angle of the x-axis labels. Options: Horizontal, Slant, and Vertical.

  • Axis line: Controls the color and visibility of the axis line.

  • Grid lines: Controls the color and visibility of the grid lines.

• Y-axis

  The configuration is similar to the x-axis. For details, see the x-axis section.

• Bubbles: Controls the display size of the bubbles.

  Map by Y-Axis

  • When enabled, bubble radii are mapped to the minimum and maximum values of the y field in your data.

  • When disabled, you must define a custom range to control the bubble size.

    • Min: The minimum value for bubble scaling. The system subtracts this value from the r field value of each data point. If the result is negative, the bubble is not displayed.

    • Max: The maximum value for bubble scaling. This value, along with Min, sets the data range for the r field to scale the bubble radius.

• Legend: The style of the chart's legend. You can click the icon to show or hide the legend.

  • Text

    • Font size: The font size of the legend text.

    • Color: The color of the legend text.

    • Font weight: The font weight of the legend text.

  • Layout

    • Spacing

      • Horizontal Spacing: The horizontal distance between legend items. This option applies only when there are multiple series.

      • Vertical Spacing: The distance between the legend and the top and bottom borders of the widget.

    • Position: The position of the legend relative to the widget's starting coordinates.

• Tooltip: The style of the tooltip that appears when you hover over or click a bubble in preview or published mode.

  • Trigger Type: The element that triggers the tooltip. Options include Data Item and Axis.

  • Trigger Action: The action that triggers the tooltip. Options include hover and click.

  • Hide Delay: The delay in milliseconds (ms) before the tooltip disappears after the trigger condition ends.

  • Background Style: The style of the tooltip's background box.

    • Background Color: The background color of the tooltip.

    • Custom Background Size: The width and height of the tooltip, in pixels.

    • Padding: The internal padding of the tooltip, in pixels.

    • Horizontal Offset: The horizontal offset of the tooltip relative to the cursor, in pixels.

    • Vertical Offset: The vertical offset of the tooltip relative to the cursor, in pixels.

    • Border Color: The border color of the tooltip.

    • Border Width: The border thickness of the tooltip, in pixels.

  • Text Style: The style of the text within the tooltip.

    • Color: The color of the tooltip text.

    • Font family: The font family of the tooltip text.

    • Font size: The font size of the tooltip text.

    • Font weight: The font weight of the tooltip text.

  • Axis pointer: The style of the axis pointer, which appears when the tooltip's Trigger Type is set to Axis.

    • Type: The type of axis pointer. Currently, only Line Pointer is supported.

    • Indicator Line Style: The color, width, and type of the indicator line. Available types include solid, dashed, and dotted.

• Series: Click the (add) or (delete) icon to add or remove a data series.

  • Series name: A custom name for the data series. If left empty, the system uses the value of the s field from the data as the series name. If you specify a name, you must ensure your data is returned in the correct order.

  • Fill color: The fill color for bubbles in this series. For more information, see Color picker. Solid and gradient fills are supported.

  • Outline color: The outline color of the bubbles in this series.

• Animation: The animation style for the widget. You can click the icon to enable or disable animations.

  • Initial Animation Duration: The duration of the initial rendering animation, in milliseconds (ms).

  • Easing: The easing effect for the animation. You can choose from a variety of common animation easing effects.

  • Update Animation Duration: The duration of the animation when the widget's data is updated, in milliseconds (ms).

Data panel

• x: The category of each bubble, which is the value on the x-axis. The data type and format of this field must be consistent with the data type and format of the x-axis labels in the options.

• y: The value for each bubble, corresponding to the y-axis value.

• r: The radius for each bubble.

• s: (Optional) The series value. This value is used when the series name in the series option is empty.

Interaction panel

Select Enable to activate the widget's interaction features. Clicking a bubble in the bubble chart triggers a data request and emits a callback value to dynamically load data. By default, the x, y, and s values from the data are emitted. For specific configurations, see Configure callback IDs.

Blueprint Editor interaction configuration

1. In the canvas editor, right-click the widget and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Bubble Chart widget in the import node list to see its configuration parameters on the canvas.

   • Events

     Event	Description
     On Request Success	Triggered after the data API request is complete and the response has been processed by data filters. It emits the processed data in JSON format. For a data sample, see the Data tab of the widget's configuration panel and view the Data Response Result section.
     On Click Data Item	Triggered when a bubble in the chart is clicked. It emits the data for the clicked bubble.

   • Actions

     Actions	Description
     Request Bubble Chart Data	Reruns the request for server-side data. Data emitted from upstream processing nodes or layer nodes is used as parameters. For example, if the bubble chart's API data source is https://api.test and the data passed to the Request Bubble Chart Data action is { id: '1'}, the final request URL will be https://api.test?id=1.
     Import Bubble Chart Data	Updates the widget with new, pre-formatted data. This action does not request data from the server. For a data sample, see the Data tab of the widget's configuration panel and view the Data Response Result section.
     Highlight	Highlights an element corresponding to a data item. The following is a sample parameter: return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     Cancel highlight	Cancels the highlight on an element corresponding to a data item. The following is a sample parameter: return { "data": {}, "options": { "mode": "single" } }
     Clear widget	Clears the widget's data. No parameters are required.
     Update widget configuration	Dynamically updates the style configuration of the widget. First, get the widget's configuration data by clicking Copy Configuration to Clipboard in the widget's configuration panel. Then, modify the values for the desired styles in a data processing node in the Blueprint Editor.
     Show	Shows the widget. Sample parameter: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. Sample parameter: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the visibility of the widget. Sample parameter: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. return{ // Movement type: "to" (absolute) or "by" (relative). Default: "to". "positionType": "to", // Target position (x and y coordinates). "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Easing function. Options: "linear", "easeInOutQuad", "easeInOutExpo". "animationEasing": "linear" } }