Vertical stacked column chart (v4.0 and later)

Chart style

A vertical stacked column chart displays multi-dimensional data differences in a compact space. It supports custom y-axis ranges, multi-series data configurations, 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

  • Custom Margin: The distance between the column chart area and the widget borders (top, bottom, left, and right). The default unit is px. Click the icon to show or hide the custom margin settings.

  • Custom Column Width: The width of the columns. A large value may cause columns in the same group to overlap. Click the icon to show or hide the custom column width settings.

  • Connection Area: The style of the connection area between data of the same series across categories. Click the icon to show or hide the connection area.

    Parameter	Description
    Trigger Method	The method to trigger the display of the connection area. Options are Always Show, Hover, and Click.
    Outline Color	The outline color of the connection area.
    Fill Color	The fill color of the connection area.

  • Value Label: The style of the value label on each column. Click the icon to show or hide the value labels.

    Parameter	Description
    Position	The display position of the value label text. Options are Top, Middle, and Bottom.
    Text Style	The font, weight, size, and color of the value label text.
    Offset	The offset of the value label in the horizontal and vertical directions.

  • Legend: The style of the chart legend. Click the icon to show or hide the legend.

    Parameter	Description
    Allow Page Turning	Enables pagination when legend items exceed the display area.
    Layout	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.
    Legend Marker	The style of the legend markers, including the shape and size.
    Legend Text	The style of the legend text, including the font, weight, size, and color.

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

  • x-axis

    • Show x-axis: Shows or hides the x-axis.

    • Data Type: The data type for the x-axis.

      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	Time-based data. You must configure the data format.

    • 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 desired data format, valid only for time and numeric data. For time, use a format such as YYYY/MM/DD HH:mm:ss. For integers, use a format such as d. For floating-point numbers, use a format such as .1f.
      Text Style	The font, weight, size, and color of the x-axis label text.
      Axis Label Display	The offset of the x-axis labels on the x-axis and y-axis, and the angle of the labels. Options are Horizontal, Angled, and Vertical.
      Custom Count	The number of x-axis labels to display. Click the icon to show or hide the custom count setting.

    • Axis Title: The style of the x-axis title. Click the icon to show or hide the x-axis title.

      Parameter	Description
      Title Content	The text content of the x-axis title.
      Offset	The offset of the x-axis title in pixels (px).
      Text Style	The font, weight, size, and color of the x-axis title text.

    • Axis Line: The style of the x-axis line. Click the icon to show or hide the x-axis line.

      Color: The color of the x-axis line.

    • Gridlines: The style of the x-axis gridlines. Click the icon to show or hide the x-axis gridlines.

      Color: The color of the x-axis gridlines.

  • y-axis

    • Show y-axis: Shows or hides the y-axis.

    • Custom Range: The minimum value range of the y-axis. Enter a custom value or select a system option. Click the icon to show or hide the custom range settings.

      • 0: The system sets the minimum value of the y-axis range to 0 by default.

      • Data Minimum: Uses the minimum value from the data.

      Note

      If you enable a custom data range for the y-axis, some minimum value data may become invalid. In this case, disable the custom range.

    • Display Format: The display format for the y-axis label values. Options are Default, 11 (Integer), 11.1 (Floating-point), 11.11 (Floating-point), 11%, 11.1%, and 11.11%.

    • Axis Label: The style of the y-axis labels. Click the icon to show or hide the y-axis labels.

      Parameter	Description
      Text Style	The font, weight, size, and color of the y-axis label text.
      Custom Count	The number of y-axis labels to display. Click the icon to show or hide the custom count setting.

    • Axis Title: The style of the y-axis title. Click the icon to show or hide the y-axis title.

      Parameter	Description
      Title Content	The text content of the y-axis title.
      Offset	The offset of the y-axis title in pixels (px).
      Text Style	The font, weight, size, and color of the y-axis title text.

    • Axis Line: The style of the y-axis line. Click the icon to show or hide the y-axis line.

      Color: The color of the y-axis line.

    • Gridlines: 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

  • CSV Data: Maps columns from a CSV data file to values and data series. When disabled, the Series Mapping configuration item becomes available. Click the icon to show or hide the CSV Data switch.

    Parameter	Description
    Auto Parse Fields	Automatically parses and displays fields from the CSV data.
    Numeric Fields Only	Parses only numeric fields from the CSV data. When disabled, all fields are parsed.

  • 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
    Mapping Field	The Column Name/Field Name and Series Name configuration items take effect only when CSV Data is turned on and Auto Parse Fields is turned off. Column Name/Field Name: The field value for the data series. This is customizable. If the field is empty, the system uses the value of the s field from the widget data as the series field value. If it is not empty, you must ensure the order of the returned data. Series Name: The display name for the data series. This is customizable. The Series s Value and Series Display configuration items take effect only when CSV Data is hidden and Series Mapping is turned on. Series s Value: The mapping value for the data series. This is customizable. If empty, the system uses the value of the s field from the widget data as the series field mapping value. If it is not empty, you must ensure the order of the returned data. Series Display: The display name for the data series. This is customizable.
    Fill Color	The fill color for the columns in this series.

  • Series Mapping: Turn on this switch to enable this feature if the data contains a series s value. You can then use the Mapping Field to set the color and name for specific series. Turning off this switch disables the Mapping Field configuration item.

• Others

  • Auxiliary Line: The style of the auxiliary line for the column chart. Click the icon to enable or disable the auxiliary line.

    Parameter	Description
    Type	The type of auxiliary line. Options are Minimum, Maximum, Average, and Median.
    Style	The style of the auxiliary line, including its color, thickness, and line style.
    Auxiliary Description	The style of the auxiliary description, which includes: Description Text: The text content of the auxiliary description. Position: The position of the description text relative to the auxiliary line. Offset: The horizontal or vertical offset of the description text. Text Style: The style of the description text, including font, weight, size, and color.

  • Interaction Enhancement for Large Datasets: Configures interaction enhancements for large datasets. Click the icon to enable or disable the enhancement effect.

    Parameter	Description
    Interaction Method	The data interaction method. Options are Thumbnail Axis and Scrollbar.
    Default Range	The data range displayed by the thumbnail axis. The value ranges from 0 to 1. This configuration item takes effect only when the Thumbnail Axis style is enabled.
    Style	The foreground and background colors of the thumbnail axis. This configuration item takes effect only when the Thumbnail Axis style is enabled.
    Direction	The orientation of the scrollbar. Options are Horizontal and Vertical. This configuration item takes effect only when the Scrollbar style is enabled.
    Category Width	The width of the data category columns. This configuration item takes effect only when the Scrollbar style is enabled.

  • Tooltip: The tooltip style shown when you hover over or click a column on the preview or publish page. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Text Style	The style of the text in the tooltip, including font, weight, size, and color.
    Indicator	The style of the tooltip indicator, including its width, line type, and color. Click the icon to enable or disable the indicator.
    Background Box Style	The style of the tooltip's background box. Background Color: The background color of the tooltip. Padding: The internal padding of the tooltip in pixels (px). Border Border Thickness: The thickness of the tooltip border in pixels (px). Border Color: The color of the tooltip border.

Data panel

Field description

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.

Interaction panel

Blueprint editor interaction configuration

1. On the canvas editor page, 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 Vertical Stacked Column Chart widget in the import node bar. The configuration parameters for the vertical stacked column chart in the blueprint editor are shown on the canvas in the following figure.

   • Events

     Event	Description
     When the API request for the vertical stacked column chart is successful	This event is triggered after the data API request is returned and processed by a filter. The processed data in JSON format is also returned. For a data example, see the Data tab's Data Response area in the widget's configuration panel on the right of the canvas editor.
     When the API request for the vertical stacked column chart fails	This event is triggered after the data API request fails (due to network issues or API errors) and is processed by a filter. The processed data in JSON format is also returned. For a data example, see the Data tab's Data Response area in the widget's configuration panel on the right of the canvas editor.
     When a data item is clicked	This event is triggered when a column of the vertical stacked column chart is clicked. The data item corresponding to the column is also returned.
     When a legend item is clicked	This event is triggered when a legend item of the vertical stacked column chart is clicked. The data item corresponding to the legend item is also returned.

   • Actions

     Action	Description
     Request API for Vertical Stacked Column Chart	Requests server-side data again. Data returned by an input data processing node or a layer node is used as a parameter. For example, if the API data source for the vertical stacked column chart is set to https://api.test and the data passed to the Request API for Vertical Stacked Column Chart action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import Data for Vertical Stacked Column Chart	After the data is processed into the component's drawing format, you can import and redraw the component without requesting server-side data again. For a data example, see the Data Response Result area on the Data tab of the configuration panel to the right of the component in the canvas editor.
     Highlight	Highlights the element corresponding to a data item. The following code provides a data example. return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     Cancel Highlight	Cancels the highlight of the element corresponding to a data item. The following code provides a data example. return { "data": {}, "options": { "mode": "single" } }
     Update Widget Configuration	Dynamically updates the style configuration of the widget. You must first go to the widget's Configuration panel and click Copy Configuration to Clipboard to obtain the widget configuration data. Then, you can change the field values for the corresponding styles in the data processing node on the blueprint editor configuration page as needed.
     Show	The following example shows reference data for a display component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following code provides a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget. The following code provides a 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 data example. return{ // The moving method. Absolute positioning: to. Relative positioning: by. 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|easeInOutExpo. "animationEasing": "linear" } }