Rounded bar chart (v3.0 and later)

Chart style

The rounded bar chart is a type of bar chart that displays multi-dimensional data differences in a compact space. It supports custom x-axis ranges, multiple data series, and stacked data displays.

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.

• Chart

  • Margin: Specifies the distance in pixels (px) between the bar chart area and the top, bottom, left, and right borders of the widget.

  • Maximum Load: Specifies the maximum number of data records to load. The system loads up to the specified number of records for layout, rendering, and calculation to ensure optimal visualization performance.

  • Bar Style: Configures the style of each bar in the chart.

    Parameter	Description
    Intra-column Pitch	The distance from the bar to the capsule shell. The value ranges from 0 to 10. The unit is px.
    Outline Color	The outline color of the capsule bars.
    Border Color	The color of the outer border of the capsule. For more information, see Color picker.
    Border Weight	The thickness of the outer border of the capsule.

  • Value Label: Configures the style of the value label for each bar. You can click the icon to show or hide the value labels.

    Parameter	Description
    Text	The font style, weight, size, and color of the value label text.
    Position	The display position of the value label text. Options are Left, Center, Right, and Outer Right.
    Null Value Data	Turn on the switch to display value labels in the bar even when the data is null. Turn off the switch to hide value labels when the data is null.

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

    Parameter	Description
    Text	The font style, weight, size, and color of the legend text.
    Layout	The position of legend items relative to each other. Spacing Horizontal Spacing: The horizontal distance between adjacent legend items. This configuration is effective only when there are multiple series. Vertical Spacing: The vertical distance between the legend and the top and bottom borders of the widget and chart. Position: The position of the legend relative to the widget's origin. Options are Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

• Axes: Configures the x-axis and the y-axis of the widget.

  • x-axis

    • x-axis Visible: Turn on the switch to show the x-axis, or turn it off to hide the x-axis.

    • Range: Configures the range of the x-axis.

      Maximum: Specifies the maximum value of the x-axis. You can enter a custom value or select one of the following system options:

      • Data Maximum: Uses the maximum value from the data.

      • Auto Round: The system automatically calculates the value based on the maximum value, minimum value, and the number of data points.

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

      Parameter	Description
      Display Format	The display format for the x-axis label values. Options are Default, 11 (integer), 11.1 (floating-point number), 11.11 (floating-point number), 11%, 11.1%, and 11.11%.
      Text	The font style, weight, size, and color of the x-axis label text.
      Axis Label Display	The number and unit of the x-axis labels.

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

      Color: Specifies the color of the x-axis line.

    • Gridline: Configures the style of the x-axis gridlines. You can click the icon to show or hide the x-axis gridlines.

      Color: Specifies the color of the x-axis gridlines.

  • y-axis

    • y-axis Visible: Turn on the switch to show the y-axis, or turn it off to hide the y-axis.

    • Padding on Both Sides: Specifies the amount of padding at the top and bottom of the y-axis. The value ranges from 0 to 1.

    • Interval: The interval between bars on the y-axis. A larger value results in thinner bars and a wider interval. The value ranges from 0 to 0.95.

    • 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
      Text	The font style, weight, size, and color of the y-axis label text.
      Axis Label Display	The angle of the y-axis labels. Options are Horizontal, Tilted, and Vertical. The number and unit of the y-axis labels.

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

      Color: Specifies the color of the y-axis line.

    • Gridline: Specifies the style of the y-axis gridlines. Click the icon to show or hide the y-axis gridlines.

      Color: The color of the y-axis gridlines.

• Series

  Data Series: You can click the or icon on the right to add or delete a data series. You can click the or icon to configure the arrangement of multiple data series. You can click the icon to copy the configuration of the currently selected data series and add a new series with the same configuration.

  Parameter	Description
  Series Name	The name of the data series. You can customize the name. If it is empty, the system uses the value of the s field in the widget data as the series name. If it is not empty, you must ensure the order of the returned data.
  Color	The color of the bars in this series.

• Others

  • Easing Animation: Configures the animation effect for the bar chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Animation Settings	Easing Effect: The easing effect for the animation. The system provides a variety of common animation easing effects for you to choose from. Animate Series Sequentially: Turn on the switch to play animations for each series sequentially. Turn off the switch to play animations for all bars simultaneously.
    Entrance Animation	The duration of the animation when the widget is first rendered. The unit is ms.
    Update Animation	Update Animation Duration: The duration of the animation when the widget data is updated. The unit is ms. Start from Previous Position: Turn on the switch to start the animation from the position of the previous data when the widget data is updated. Turn off the switch to start the animation from the initial position.

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

    Parameter	Description
    Disappear Delay	When the trigger condition is no longer met, the tooltip disappears. This item sets the delay time before the tooltip disappears. The unit is ms.
    Trigger Method	Trigger Type: The target type that triggers the tooltip. Options include Data Item and Axis. Trigger Action: The action that triggers the tooltip. Options include Hover and Click.
    Text Style	The style of the text in the tooltip, including font style, weight, size, and color.
    Background Box Style	The style of the tooltip's background box. Background Color: The background color of the tooltip. Custom: The width and height of the tooltip in px. Click the icon to enable or disable the custom tooltip. Padding: The internal padding of the tooltip in px. Offset Horizontal Offset: The horizontal offset of the tooltip relative to the mouse pointer position, in px. Vertical Offset: The vertical offset of the tooltip relative to the mouse pointer position, in px. Border Border Weight: The thickness of the tooltip border, in px. Border Color: The color of the tooltip border.

Data panel

Field descriptions

Interaction panel

Select Enable to turn on the interaction feature for the widget. When you click a bar in the rounded bar chart, it triggers a data request, returns a callback value, and dynamically loads data for other components. By default, the x, y, and s values from the data are returned. For more information about specific configurations, see How to configure the callback ID for a ticker board widget.

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 Rounded Bar Chart widget in the Import Nodes bar. The configuration parameters for the rounded bar chart are displayed on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the Horizontal Capsule Column Chart API Request Completes	This event is triggered after the data API request returns and the filter processes the data. The event also returns the processed data 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.
     Horizontal Capsule Column Chart API Request Failed	This event is triggered when the data API request fails due to network issues, API errors, or other problems. The event also returns the processed data 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 clicked	This event is triggered when you click a bar in the rounded bar chart. The event returns the data item that corresponds to the clicked bar.

   • Actions

     Action	Description
     Horizontal Capsule Bar Chart API	Re-requests server-side data. Data from an input data processing node or a layer node is used as a parameter. For example, if the rounded bar chart is configured with an API data source of https://api.test and the data passed to the Request rounded bar chart API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import rounded bar chart API	Processes data according to the widget's rendering format, imports it into the widget, and re-renders the chart. It does not need to re-request server-side data. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     Highlight	Highlights the element corresponding to the data item. The following code provides a reference data example. return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     Cancel Highlight	Cancels the highlight on the element corresponding to the data item. The following code provides a reference data example. return { "data": {}, "options": { "mode": "single" } }
     Clear Widget	Clears the widget data. No parameters are required.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. First, in the widget's Configuration panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the blueprint editor configuration page as needed.
     Show	Shows the widget. The following code provides a reference data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	The following example shows the reference data for the display component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget between shown and hidden. The following code provides a reference data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following code provides a reference data example. return{ // Movement method. Absolute positioning: to, relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }