Waterfall chart

Chart style

A waterfall chart is a type of column chart. It supports custom x- and y-axes, displaying value differences across multiple data categories, and a waterfall-style display of increases and decreases in data. It efficiently displays the total increase or decrease in data within a compact visualization space.

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

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. If you turn on the switch, you can configure the distance between the waterfall chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Column Width	The width of the columns in px. Click the icon to show or hide the column width.
  Increase	The title and color of the columns that show an upward trend for positive category data. For more information about colors, see Color picker. Click the icon to show or hide the Increase configuration item.
  Decrease	The title and color of the columns that show a downward trend for negative category data. For more information about colors, see Color picker. Click the icon to show or hide the Decrease configuration item.
  Total	The title and color of the column that shows the total of all category data. For more information about colors, see Color picker. Click the icon to show or hide the Total configuration item.
  Leader Line	The style of the leader lines between columns, including the line shape, thickness, and color. You can click the icon to show or hide the leader line style. Note If you set Line Type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.
  Column Label	The style of the column labels. Click the icon to show or hide the column label configuration items. 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: Sets the number format for the labels. Options include 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 Label Field is set to range or y. Prefix and Suffix: Sets the prefix and suffix for the column labels. Label Position: Selects the display position of the label content. Options include Top, Center, and Bottom. Relative Offset: The vertical and horizontal offset of the column label relative to the column, in px. Text Style: The text style of the column labels, including the font, weight, size, and color. Text Outline: The text outline style of the column labels, including the outline thickness and color.

• Coordinates: The coordinate axes for the component are the X-axis and the Y-axis.

  • X-axis

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

    • Data Type: Sets the data type for the x-axis. Options include Numeric, Category, and Time.

    • Display Range: Sets the display range of the minimum and maximum values on the x-axis. This parameter can be configured only when Data Type is set to Numeric.

      Parameter	Description
      Minimum	The minimum value of 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 of 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 line shape, thickness, and color. You can click the icon to show or hide the x-axis line style settings.

      Note

      If you set 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	The text content of the x-axis title.
      Display Mode	The display mode of the x-axis title, including the angle and offset of the title.
      Text Style	The font, weight, size, and color of the x-axis title text.

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

    • 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 display format of the x-axis label values. Options include 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 can be configured only when Data Type is set to Numeric.
      Margin at Ends	The distance between the x-axis labels and the two ends of the axis line. The unit is %.
      Label Display	The display style of the labels, including the desired number of x-axis ticks, the prefix and suffix of the labels, the angle and offset of the labels, and the alignment of the labels.
      Text Style	The font, weight, size, and color of the x-axis label text.

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

      Note

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

  • Y-axis

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

    • Display Range: Sets the display range of the minimum and maximum values on the y-axis.

      Parameter	Description
      Minimum	The minimum value of the y-axis. You can enter a custom value or select 0 or Data Minimum.
      Maximum	The maximum value of 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 line shape, thickness, and color. You can click the icon to show or hide the y-axis line style settings.

    • 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.
      Display Mode	The display mode of the y-axis title, including the angle and offset of the title.
      Text Style	The font, weight, size, and color of the y-axis title text.

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

    • 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 display format of the y-axis label values. Options include 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.
      Margin at Ends	The distance between the y-axis labels and the two ends of the axis line. The unit is %.
      Label Display	The display style of the labels, including the number of y-axis labels, the prefix and suffix of the labels, the angle and offset of the labels, and the alignment of the labels.
      Text Style	The font, weight, size, and color of the y-axis label text.

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

      Note

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

• Animation: Configures the animation effect for the waterfall chart.

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect of the column chart.
  Animation Effect	The type of animation effect. The system provides a variety of common animation effects, including Horizontal Grow, Vertical Grow, Scale In, and Slide In. This parameter can be configured only after you enable animation.
  Animation Duration	The duration of the widget's animation effect, in milliseconds (ms). This parameter can be configured only after you enable animation.

• Interaction: Configures the interaction effects for the column chart widget.

  • Tooltip: Configures the style of the tooltip that appears when you hover over or click a column on the preview or published page. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The mode of the tooltip. Options include Simple and General.
    Trigger Method	The method to trigger the tooltip. Options include Hover and Click.
    Display Position	The display position of the tooltip. Options include Top, Bottom, Left, and Right.
    Title Spacing	The spacing between titles in the tooltip, in 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 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 one with the same settings. Field Name: The field name for the tooltip content. It 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, in 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 margin of the tooltip popup background. Background Color: The background color of the tooltip. Border Style: The border style of the tooltip, including the border 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, thickness, and color. Click the icon to enable or disable the axis pointer. Note If you set Line Type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

  • Selected State: Configures the style of a column when it is selected. Click the icon to enable or disable the selected state style.

    Parameter	Description
    Trigger Method	The method to trigger the selection of a column. Options include Hover and Click.
    Selection Mode	The method to select columns. Options include Single and Multiple.
    Column Color	The color of the column in the selected state.
    Column Outline	The style of the column outline, including the line type, thickness, and color. Note If you set Line Type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

• Legend: Configures the legend style for the column 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. Options include 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 font, weight, size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Categorical Legend	The style of the categorical legend. Legend Marker: The shape and size of the legend markers. Legend Spacing: The horizontal and vertical distance between different categorical legend items. Maximum Width: Sets the maximum width of the legend, in px. Allow Pagination: Turn on the switch to enable legend pagination. You can configure the page number and arrow styles for when the number of legend items is too large to display on one page. Turn off the switch to display all legend items on a single page without pagination. Page Number Style: The style of the page numbers, including the font, weight, size, and color. Arrow Style: The size, default color, and disabled color of the arrows for pagination.

• Condition: Configures conditional styling.

  Conditional Style: Click the or icon to add or delete a condition. Click the or icon to arrange multiple conditions. Click the icon to copy the current condition configuration and add a new condition with the same settings. For more information about the configuration, see Use the condition tree.

  Column Color: Turn on this switch to configure the column color for this series of conditions. Turn off this 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.

Field configuration

Interaction panel

When a Data Item is Selected: Select Enable to activate interactions for the Waterfall Chart widget. When a data item is clicked, a callback value is returned, which by default includes the x and y data fields. For more information, 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 Waterfall Chart widget in the Imported Nodes pane. The configuration parameters for the waterfall chart are displayed on the canvas.

   • Events

     Event	Description
     On Waterfall Chart API Request Completion	This event is triggered after the data API request succeeds and is processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     When the Waterfall Chart API Request Fails	This event is thrown when a data request fails, such as due to network issues or interface errors. The failed response is processed by a filter, and the event is then thrown with the processed data in JSON format. For a data example, in the canvas editor, see the Data Response Result area on the Data tab in the configuration panel to the right of the widget.
     When a Data Item is Selected	This event is triggered when you click a column in the waterfall chart. The data item that corresponds to the column is returned.

   • Actions

     Action	Description
     Request waterfall chart API	Sends a new request for server-side data. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if the API data source for a waterfall chart is set to https://api.test and the data passed to the Request waterfall chart API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import waterfall chart data	Processes data into the format required by the component, then imports the data to redraw the chart. This action does not request new data from the server. For a data example, see the Data Response area on the Data tab in the component's configuration panel in the canvas editor.
     Highlight	Highlights the element that corresponds to a data item. The following code shows an 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 component's selections. This action does not require parameters.
     Update component configuration	Dynamically updates the style configuration of the component. First, go to the component's Configuration panel and click Copy Configuration to Clipboard to get the configuration data. Then, in a data processing node within the blueprint editor, change the field values for the styles as needed.
     Show	Shows the component. The following code shows a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following code shows a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component's visibility between shown and hidden. The following code shows 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 shows a data example. return{ // The movement method. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x- and y-coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Valid values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }