Bubble chart

Chart style

A bubble chart uses bubbles to display data. You can customize the size of the bubbles to clearly show the differences between discrete data points.

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.

• Graphics

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. When enabled, you can configure the distance between the bubble chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Bubble Shape	The shape of the bubbles. For more information, see Shape mapper instructions to configure mapping styles for different bubble shapes.
  Bubble Size	The size of the bubbles. For more information, see Size mapper instructions to configure mapping styles for different bubble sizes.
  Bubble Color	The color of the bubbles. For more information, see Color mapper instructions to configure mapping styles for different bubble colors.
  Opacity	The opacity of the bubble points. The value ranges from 0 to 1. The larger the value, the more opaque the bubbles.
  Bubble Outline	The style of the bubble outline, including the line type, width, and color. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.
  Bubble Label	The style of the bubble labels. Click the icon to show or hide the bubble label configurations. Label Field: The content of the label must correspond to the content of a field in the data panel. By default, the content of the y field is used. Number Format: The number format for the label. Valid values: Default, 11 (integer), 11.1 (floating-point number), 11.11 (floating-point number), 11% (percentage), 11.1% (percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats. This parameter is displayed only when you select the y field for Label Field. Prefix and Suffix: The prefix and suffix for the bar label. Relative Offset: The vertical and horizontal offset of the bubble label relative to the bubble. The unit is px. Text Style: The text style of the bubble label, including the font, weight, size, and color. Text Outline: The text outline style of the bubble label, including the outline width and color. Null Data: Turn on the switch to hide null data when the bubble radius and value are both 0. Turn off the switch to show null data.

• Coordinates: The widget axes include the x-axis and y-axis.

  • X-axis

    • Show X-axis: Turn on the switch to show the x-axis. Turn off the switch to hide it.

    • Data Type: Specifies the data type for the x-axis. Valid values are Numeric, Categorical, and Time.

    • Display Range: Specifies the display range of the minimum and maximum values on the x-axis. This parameter is available only when you set Data Type to Numeric.

      Parameter	Description
      Minimum	The minimum value on the x-axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	The maximum value on the x-axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

    • Axis Line: Configures the style of the x-axis line, including the shape, width, and style. You can click the icon to show or hide the x-axis line.

      Note

      If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

    • Axis Title: Configures the style of the x-axis title. You can click the icon to show or hide the x-axis title.

      Parameter	Description
      Title Display	The text content of the x-axis title.
      Title Display	The display style of the x-axis title, including the angle and offset.
      Text Style	The text style of the x-axis title, including the font, weight, size, and color.

    • Tick Line: Configures the style of the x-axis tick lines, including the length, width, and color. You can click the icon to show or hide the x-axis tick lines.

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

      Parameter	Description
      Display Format	The number display format for the x-axis labels. Valid values: Default, 11 (integer), 11.1 (floating-point number), 11.11 (floating-point number), 11% (percentage), 11.1% (percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats. This parameter is available only when you set Data Type for the x-axis to Numeric.
      Padding at Ends	The distance between the x-axis labels and the two ends of the axis. The unit is %.
      Label Display	The display style of the labels, including the number of x-axis labels, the prefix and suffix, the angle, the offset, and the alignment.
      Text Style	The text style of the x-axis labels, including the font, weight, size, and color.

    • Gridline: Configures the style of the x-axis gridlines, including the line type, width, color, length, and spacing. You can click the icon to show or hide the x-axis gridlines.

  • Y-axis

    • Show Y-axis: Turn on the switch to show the y-axis. Turn off the switch to hide it.

    • Data Type: Specifies the data type for the y-axis. Valid values are Numeric, Categorical, and Time.

    • Display Range: Specifies the display range of the minimum and maximum values on the y-axis. This parameter is available only when you set Data Type to Numeric.

      Parameter	Description
      Minimum	The minimum value on the y-axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	The maximum value on the y-axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

    • Axis Line: Configures the style of the y-axis line, including the shape, width, and style. You can click the icon to show or hide the y-axis line.

    • Axis Title: Configures the style of the y-axis title. You can click the icon to show or hide the y-axis title.

      Parameter	Description
      Title	The text content of the y-axis title.
      Title Display	The display style of the y-axis title, including the angle and offset.
      Text Style	The text style of the y-axis title, including the font, weight, size, and color.

    • Tick Line: Configures the style of the y-axis tick lines, including the length, width, and color. You can click the icon to show or hide the y-axis tick lines.

    • Axis Label: Configures the style of the y-axis labels. You can click the icon to show or hide the y-axis labels.

      Parameter	Description
      Display Format	The number display format for the y-axis labels. Valid values: Default, 11 (integer), 11.1 (floating-point number), 11.11 (floating-point number), 11% (percentage), 11.1% (percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats. This parameter is available only when you set Data Type for the y-axis to Numeric.
      Padding at Ends	The distance between the y-axis labels and the two ends of the axis. The unit is %.
      Label Display	The display style of the labels, including the number of y-axis labels, the prefix and suffix, the angle, the offset, and the alignment.
      Text Style	The text style of the y-axis labels, including the font, weight, size, and color.

    • Gridline: Configures the style of the y-axis gridlines, including the line type, width, color, length, and spacing. You can click the icon to show or hide the y-axis gridlines.

• Animation: Specifies the animation effect of the bubble chart.

  Parameter	Description
  Enable Animation	Turn on the switch to configure the animation effect for the bubble chart.
  Animation Effect	The animation effect type. The system provides multiple common animation effects, including Fade, Scale In, and Slide In. This parameter is available only when you turn on the animation switch.
  Animation Duration	The duration of the animation effect. The unit is ms. This parameter is available only when you turn on the animation switch.

• Interaction: Specifies the interaction effect of the bubble chart widget.

  • Tooltip: Specifies the style of the tooltip that appears when you hover over or click a bubble on the preview or publish page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The mode of the tooltip. Valid values: Simple and General.
    Trigger Method	The method to trigger the tooltip. Valid values: Hover and Click.
    Display Position	The display position of the tooltip. Valid values: Top, Bottom, Left, and Right.
    Title Spacing	The spacing between titles in the tooltip. The unit is px.
    Title Text	The style of the title text in the tooltip, including the font, weight, size, and color.
    Content Display	Click the or icon on the right to add or delete a content display series for the tooltip. Click the or icon to configure the arrangement of multiple content display series. Click the icon to copy the current content display series configuration and add a new series with the same configuration. Field Name: The field name for the tooltip content. This must match a field in the data panel. Display Name: The display name for the tooltip content. Suffix: The suffix for the tooltip content.
    Content Spacing	The spacing between content text in the tooltip. The unit is px.
    Content Text	The style of the content text in the tooltip, including the font, weight, size, and color.
    Popup Background	The background style of the tooltip popup. Background Margin: The horizontal and vertical margins of the tooltip background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the line type, border radius, line width, and border color.
    Axis Pointer	The style of the axis pointer line for the tooltip, including the line type, width, and color. Click the icon to show or hide the axis pointer. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

  • Selected State: Specifies the style of a bubble when it is selected. You can click the icon to enable or disable the selected state style.

    Parameter	Description
    Trigger Method	The method to trigger the selected state. Valid values: Hover and Click.
    Selection Method	The method to select bubbles. Valid values: Single and Multiple.
    Bubble Color	The color of the bubble in the selected state.
    Bubble Outline	The style of the bubble outline, including the line type, width, and color. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

• Legend: Specifies the legend style of the bubble chart.

  Parameter	Description
  Enable Legend	Turn on the switch to configure the legend style. Turn off the switch to disable legend style configuration.
  Legend Position	The position of the legend relative to the widget's starting coordinate. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The text style of the legend, including the font, weight, size, and color.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Max Width	The maximum width of the legend. The unit is px.
  Allow Paging	Turn on the switch to enable legend paging. You can configure the style of page numbers and arrows for when the legend has too many items and requires paging. Turn off the switch to display all legend items on a single page without paging. Max Rows: The maximum number of rows to display for the legend. If the number of rows exceeds this value, the legend will be paginated. Page Number Style: The style of the page numbers, including the font, weight, size, and color. Arrow Style: The size and color of the arrows for paging. You can set a default color and a disabled color.
  Color Legend	Click the icon to enable or disable the color legend style. Track Style: Includes the type, length, height, and background color of the track. Slider Style: Includes the minimum value, maximum value, size, and color of the slider. Label Style: Includes the alignment and spacing of the slider label.
  Shape Legend	The legend style based on the bubble shape mapping type. You can configure the size and color of the legend markers, the distance between legend items for different shape mappings, and the line height. Click the icon to enable or disable the shape legend style.
  Size Legend	The legend style based on the bubble size mapping type. Click the icon to enable or disable the size legend style. Track Style Type: The type of the legend track. Valid values: Rectangle and Triangle. Length: The length of the legend track. Height: The height of the legend track. Selected Color: The color of the legend track when selected. Background Color: The background color of the legend track. Slider Style: The style of the slider on the legend track. Minimum: The minimum value of the slider. You can enter a custom value or select Auto to use the minimum value from the data. Maximum: The maximum value of the slider. You can enter a custom value or select Auto to use the maximum value from the data. Size: The size of the slider. Color: The color of the slider. Label Style: The style of the text label on the legend. Alignment: The alignment of the legend text label relative to the track. Valid values: Top, Center, and Bottom. Spacing: The distance between the legend text label and the track.

• Conditions: Specifies conditional style instructions.

  Conditional Style: You can click the or icon on the right to add or delete a conditional style. You can click the or icon to configure the arrangement of multiple conditional styles. You can click the icon to copy the current data series configuration and add a new conditional style with the same configuration. For more information about the configuration, see Condition tree instructions.

  • Bubble Shape: Turn on the switch to configure the bubble shape for this conditional style. Turn off the switch to disable this configuration.

  • Bubble Radius: Turn on the switch to configure the bubble radius for this conditional style. Turn off the switch to disable this configuration.

  • Bubble Color: Turn on the switch to configure the bubble color for this conditional style. Turn off the switch to disable this configuration.

  • Bubble Outline: Turn on the switch to configure the bubble outline for this conditional style, including the line type, width, and color. Turn off the switch to disable this configuration.

Data panel (default mode)

Field configuration

Table 1. Parameters

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.

Data panel (analysis mode)

For more information about the operations in the BI analysis data configuration panel, see BI analysis mode data panel features.

Configuration field descriptions

Interaction panel

Interaction description

Blueprint editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add 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 Imported Nodes pane. The blueprint editor configuration parameters for the bubble chart are shown in the following figure.

   • Events

     Event	Description
     When the Bubble Chart API Request Completes	This event is triggered when the data API request is returned and processed by the filter. The processed data is in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When the bubble chart API request fails	This event is triggered when the data API request fails because of a network issue or an API error. The processed data is in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a data item is selected	This event is triggered when you click a bubble in the bubble chart. The data item that corresponds to the bubble is also emitted.
     When a legend item is clicked	This event is triggered when you click a legend item in the bubble chart. The data item that corresponds to the bubble is also emitted.

   • Actions

     Action	Description
     Request bubble chart API	Requests server-side data again. Data from an input data processing node or a layer node is used as a parameter. For example, if the API data source for the bubble chart is set to https://api.test and the data passed to the Request bubble chart API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import bubble chart API	Processes and imports data in the component's format to redraw the component. This action does not request server-side data again. For a data example, see the Data Response area on the Data tab of the component's configuration pane in the canvas editor.
     Highlight	Highlights the element that corresponds to a data item. The following code provides a data example. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // The fill color } }
     Reset selections	Clears and resets the selected item data for the component. No parameters are required.
     Update component configuration	Updates the component's style configuration dynamically. To get the configuration data, click Copy Configuration to Clipboard in the component's Configuration pane. Then, change the style field values in the data processing node of the Blueprint Editor as needed.
     Show	Shows the component. The following code provides a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following code provides a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component between shown and hidden. The following code provides a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. The following code provides a data example. return{ // The move type. 'to' for absolute positioning, 'by' for relative positioning. Default value: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }