waterfall-charts

Chart style

A waterfall chart is a type of bar chart that supports custom x-axis and y-axis settings, multi-category data difference configuration, and waterfall-style data rise and fall display. It can display the total data increase or decrease in a compact dashboard.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

• Size: the width and height of the widget. Unit: pixels.

• Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

• Rotate: The widget is rotated around the center of the widget. Unit: degrees.

  • 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.

  • Click the icon to flip the widget style.

  • Click the icon to flip the widget style.

• Opacity: Valid values: 0 to 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 Margins	Click the icon to control the display of the chart margins. If you turn on the switch, you can configure the distance between the waterfall column chart area and the four boundaries of the widget. Unit: px by default.
  Column Width	The width of the column. Unit: px. Click the icon to control the width of the column.
  Add	The title and color of the column whose category data is positive. For more information about the color, see color picker description. Click the icon to control whether to add a configuration items.
  Decrease	The title and color of the column that displays the downward trend when the category data is negative. For more information about the color, see color picker description. Click the icon to reduce the visibility of the configuration items.
  Total	The title and color of the column after all the category data is added. For more information about the color, see color picker description. Click the icon to control the display of the total configuration items.
  traction line	The drag line style between waterfall charts, including the line shape, line thickness, and line color. You can click the icon to control the visibility of the x-axis style. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.
  Column Label	The label style of the column. Click the icon to control the display of the label configuration items. Label Field: The content of the label field must correspond to the content of the field on the Data tab. By default, the content of the y field is retrieved. Value Format: Specify the value format of the tag. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data Display Format Description. This parameter is displayed only when range or y is selected for the Label field. Pre-Suffix: the prefix and suffix of the column tag. Label Position: Select the position of the label. Valid values: Top, Middle, and Bottom. Relative Offset: the vertical and horizontal offsets of the column labels. Unit: pixels. Text Style: the text style of the column tag, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the column, including the thickness and color of the stroke.

• Coordinates: the x-axis and Y axes of a widget.

  • X-axis

    • x-axis Display: If the switch is turned on, the x-axis style in the widget is visible. If the switch is turned off, the x-axis style in the widget is invisible.

    • Data Type: the type of the x-axis data. Valid values: Number, Category, and Time.

    • Display Range: the display range of the minimum and maximum values of the x-axis data. This parameter is available only when the Data Type configuration items is set to Numerical.

      Parameter	Description
      Minimum Runtime Duration	The minimum value of the x-axis. You can set this parameter to Minimum Value.
      Maximum Runtime Duration	The maximum value of the x-axis. You can set this parameter to Maximum Value.

    • Axis: the x-axis style of the waterfall chart, including the line type, line thickness, and line color. You can click the icon to control the x-axis style.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

    • Axis Title: the x-axis title style of the waterfall chart. You can click the icon to control the display of the x-axis title.

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

    • Axis Label: the x-axis label style of the waterfall chart. You can click the icon to control the display of the x-axis label.

      Parameter	Description
      Display Format	The display format of the label value. Valuable values include Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 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 feature is available only when you set Data Type to Numerical.
      End Spacing	The distance between the two ends of the label from the axis, in %.
      Label Display	The display style of the label, including the expected number of x-axis scales, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.
      Text Style	The font style, text weight, font size, and color of the axis label text.

    • Tick mark: the x-axis tick mark style of the waterfall chart, including the length, thickness, and color of the tick mark. You can click the icon to control whether to x-axis the tick mark style.

    • Gridlines: the style of the x-axis grid lines in the waterfall chart, including the line style, thickness, and color of the grid lines. You can click the icon to control the appearance or inappearance of the x-axis grid lines.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

  • Y-axis

    • Y-Axis Display: If you turn on the switch, the Y-axis display in the widget is visible. If you turn off the switch, the Y-axis display in the widget is invisible.

    • Display Range: the range of the minimum and maximum values of the Y-axis.

      Parameter	Description
      Minimum Runtime Duration	The minimum value of the y-axis. You can specify a custom value. You can also select Minimum Value to obtain the minimum value of the data.
      Maximum Runtime Duration	The maximum value of the y-axis. You can specify a custom value. You can also select Maximum Data Value to obtain the maximum value in the data.

    • Axis: the Y-axis style of the waterfall chart, including the line type, line thickness, and line color. You can click the icon to control the Y-axis style.

    • Axis Title: the style of the y-axis title of the waterfall chart. You can click the icon to control whether the y-axis title appears or not.

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

    • Axis Label: the axis label style of the waterfall chart. You can click the icon to specify whether the axis label is displayed or hidden.

      Parameter	Description
      Display Format	The display format of the axis label value. Valides: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 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.
      End Spacing	The distance between the two ends of the label from the axis, in %.
      Label Display	The display style of the axis labels, including the number of 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 style, text weight, font size, and color of the axis label text.

    • Tick Line: the tick line style in the Y-axis of the waterfall chart, including the length, thickness, and color of the tick line. You can click the icon to control the display or disdisplay of the tick line style in the Y-axis.

    • Gridlines: the style of the grid lines in the y-axis of the waterfall chart, including the line style, weight, and color of the grid lines. You can click the icon to control the appearance or concealment of the grid lines in the y-axis.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be set.

• Animation: the animation style of the waterfall chart.

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect of the waterfall chart.
  Animation	The type of the animation. The system provides you with a variety of common animation effects, including Horizontal Growth, Vertical Growth, Zoom and Fade, and Fade. You can configure this feature only after you turn on Animation.
  Animation Duration	The duration of the widget animation effect. Unit: ms. This value is configurable only after you turn on the Animation switch.

• Interaction: the interaction style of the waterfall widget.

  • dialog box: the style of the dialog box that appears when you move the pointer over or click the waterfall chart on the preview or publish page. You can click the icon to turn the dialog box on or off.

    Parameter	Description
    Mode	dialog box patterns, optional, include concise and universal.
    Trigger	The method by which the dialog box is triggered. You can select Hover or Click.
    Display Position	The position style of the dialog box display. The value is optional, including top, bottom, left, and right.
    Title Spacing	The spacing between titles in the dialog box. Unit: px.
    Title Text	The style of the title text in the dialog box, including the font style, text weight, font size, and color.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Field Name: the name of the field in the dialog box. The name must match the field in the data panel. Display Name: the display name of the dialog box content. Suffix: the suffix of the dialog box content.
    Content Spacing	The spacing between the text of the dialog box content. Unit: px.
    Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Pop-up background	dialog box pop-up background style. Background Margin: dialog box the horizontal and vertical margins of the pop-up background. Background Color: The background color of the dialog box. Border Style: dialog box the style of the border, including the border line type, rounded corner size, line width size, and border line color.
    Axis indicator	The axis of the dialog box indicates the style of the line, including the axis indicating the type, thickness value, and color of the line. Click the icon to turn the axis indicator on or off. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

  • Selected: the selected column. You can click the icon to enable or disable the selected column.

    Parameter	Description
    Trigger	The trigger mode of the selected column. This parameter is optional, including Hover and Click.
    Select Method	The method by which you want to select a column. You can select one or more columns.
    Column color	The color of the column in the selected state.
    Pillar Stroke	The stroke line style of the column, including the stroke line type, line thickness, and stroke line color. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be set.

• Legend: the legend style of the waterfall chart.

  Parameter	Description
  Legend Switch	If you turn on the switch, you can configure the legend style. If you turn off the switch, you cannot configure the legend style.
  Legend Position	The position of the legend relative to the start coordinates of the widget. Valides 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 style, text weight, font size, and color of the legend text.
  Chart Spacing	Horizontal and vertical spacing for legends and charts.
  Category Legend	The style of the sub-type legend. Legend Mark: the shape and size of the legend mark. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Paging Allowed: If you turn on the switch, you can turn the legend on the page. You can configure the page number style and arrow style when the number of legends is too large. If you turn off the switch, the legend content is displayed on one page and cannot be turned. Page Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

• Dimension: the description of the dimension style.

  • Auxiliary Line: Click the or icon on the right to add or delete an auxiliary line series. Click the or icon to configure the arrangement style of multiple guide line series. Click the icon to copy the currently selected auxiliary line series configuration and add an auxiliary line series with the same configuration.

    • Type: the type of the auxiliary line, including horizontal lines and slashes.

    • Data Value: the data values of auxiliary lines, including the average line, median line, maximum line, and minimum line.

    • Linetype Style: the linetype style of the auxiliary line, including the linetype, thickness, length, spacing, and color of the auxiliary line.

    • Text: specifies the content style of the guide line, including the text, data display switch, rotation angle, horizontal and vertical offset, and alignment position.

    • Text Background: specifies the background of the guide line, including the color of the background and the radius of the rounded corner.

    • Text Style: the text style of the guide line.

  • Auxiliary Frame: Click the or icon to add or delete an auxiliary frame series. Click the or icon to configure the arrangement style of multiple auxiliary frame series. Click the icon to copy the auxiliary frame series configuration and add an auxiliary frame series with the same configuration.

    • End Point Position: Set the start time horizontal /y-axis of the auxiliary frame and the horizontal /y-axis of the end point.

    • Background Fill: Set the background color of the auxiliary frame.

    • Line Style: the line style of the auxiliary frame, including the line type, weight, length, spacing, and color of the auxiliary frame.

    • Area Coloring: Set the area coloring value of the auxiliary frame series. If you turn on Sweep Animation or Column Background Color, this parameter becomes invalid.

    • Text: Set the content style of the auxiliary frame, including the text, horizontal and vertical offset, rotation angle, and display position.

    • Text Background: Set the background of the auxiliary frame, including the color of the background and the radius of the rounded corners.

    • Text Style: the text style of the auxiliary frame.

  • Column Style: Click the or icon to add or delete a conditional style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the current conditional style configuration and add a conditional style with the same configuration. For more information about how to configure conditional patterns, see Use conditional trees.

    • Column Color: If you turn on the switch, you cannot configure the column color in the condition style. If you turn off the switch, you cannot configure the column color in the condition style.

    • Text Labeling: the style of text labeling under the current conditions.

      • Text Content: specifies the text annotation content.

      • Offset: the horizontal and vertical offsets of the text annotation. Unit: pixels.

      • Orientation: the orientation of the text annotation relative to the text annotation point, including top, right, bottom, and left.

      • Text Background: specifies the background of the text annotation, including the color of the background and the radius of the rounded corners.

      • Text Style: the text style of the text content.

      • Text Line: specifies the line style of the text annotation, including the line type, color, weight, and length.

      • Text Label Point: Set the Fill Color and Radius of the text label point.

        Note

        The stroke style is the same as the line style.

Data Sources panel

Advanced Panel

When Data Item is selected: enables the widget interaction feature. When you click to select a data item, a temporary variable is thrown. By default, the x and y fields in the data are thrown. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the waterfall chart request is completed	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When a data item is selected	The event that is raised when a column of the waterfall chart is clicked, and the corresponding data item of the column is also raised.

   • Action

     Action	Description
     Import a waterfall chart	After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Request waterfall chart operation	This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the Request Waterfall Chart API action is { id: '1'}, the final request interface is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. Single highlight { 'x': 'Category 1' } Bulk Highlight [ { 'x': 'Category 1' }, { 'y': 120 } ] style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used. Reference data example { "data": {}, "style": {} }
     Reset selections	Clear the selection item data of the reset component. No parameters are required.
     Move	Move a widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Show /Show	Specifies whether to show or hide a widget. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. In the Blueprint Editor configuration page, change the field values of the corresponding styles in the data processing node as needed.