Range column chart

Chart style

A range column chart clearly shows data differences within a range. However, it uses a large amount of space in a visualization. You can select dataset fields and configure data mapping styles.

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.

• Graphic

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. If you show the chart margin, you can configure the distance between the column 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 this configuration item.
  Column Color	The color of the columns. For more information, see Use the color mapper to configure the mapping colors for different columns.
  Column Label	The style of the column labels. Click the icon to show or hide this configuration item. Label Field: The content of the labels must correspond to the field content in the data panel. By default, the content of the range field is used. Note The range field displays the numerical interval. Range Mark: The style of the mark that indicates the numerical interval on the column. Number Format: 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 option is available only when you select range or y for Label Field. Prefix and Suffix: The prefix and suffix for the column labels. Label Position: The display position of the label content. Options include Top, Middle, and Bottom. Relative Offset: The vertical and horizontal offset of the column labels relative to the columns, in px. Text Style: The text style for the column labels, including the font, weight, size, and color. Text Outline: The text outline style for the column labels, including the outline weight and color.
  Texture	The pattern style for the columns. Click the icon to show or hide this configuration item. Type: The type of pattern. Options include Point, Line, and Square. Fill Style: The fill style of the pattern. For more information, see Color picker to configure the pattern color. Outline Style: The outline style of the pattern. For more information, see Color picker to configure the pattern color. This option is available only when you set Type to Point or Square. Extra Style: Other styles for the pattern, including Shape Size, Shape Spacing, Line Spacing, Rotation Angle, and the Interlaced switch.

• Axes: The widget axes include the X-Axis and Y-Axis.

  • X-Axis

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

    • Data Type: The data type of the x-axis. Options include Numerical, Categorical, and Time.

    • Display Range: The display range of the minimum and maximum values on the x-axis. This option is available only if you set Data Type to Numerical.

      Parameter	Description
      Minimum	The minimum value of the x-axis. You can enter a custom value or select Data Min 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 Max to use the maximum value from the data.

    • Axis Line: Specifies the style of the x-axis line, including the line shape, weight, and color. 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: Specifies 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.
      Display Style	The display style of the x-axis title, including the angle and offset.
      Text Style	The font, weight, size, and color of the x-axis title text.

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

    • Axis Label: Specifies 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. 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 option is available only when you set Data Type for the x-axis to Numerical.
      End Spacing	The distance between the x-axis labels and the two ends of the axis, in percentage (%).
      Label Display	The display style of the labels, including the desired number of ticks for the x-axis labels, the prefix and suffix, the angle, the offset, and the alignment.
      Text Style	The font, weight, size, and color of the x-axis label text.

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

      Note

      If you set the 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. Turn off this switch to hide the y-axis.

    • Display Range: The display range of the minimum and maximum values on the y-axis. This option is available only if you set Data Type to Numerical.

      Parameter	Description
      Minimum	The minimum value of the y-axis. You can enter a custom value or select one of the following system options: 0: The system sets the minimum value of the y-axis range to 0 by default. Data Min: Uses the minimum value from the data.
      Maximum	The maximum value of the y-axis. You can enter a custom value or select Data Max to use the maximum value from the data.

    • Axis Line: Specifies the style of the y-axis line, including the line shape, weight, and color. You can click the icon to show or hide the y-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: Specifies the style of the y-axis title. You can click the icon to show or hide the y-axis title.

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

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

    • Axis Label: Specifies 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. 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 option is available only when you set Data Type for the y-axis to Numerical.
      End Spacing	The distance between the y-axis labels and the two ends of the axis, in percentage (%).
      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 font, weight, size, and color of the y-axis label text.

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

      Note

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

• Animation: Specifies the animation effect for the range column chart.

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect for the range 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 option is available only after you enable animation.
  Animation Duration	The duration of the widget animation effect, in milliseconds (ms). This option is available only after you enable animation.

• Interaction: Specifies the interaction effects for the range column chart widget.

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

    Parameter	Description
    Mode	The mode of the tooltip. Options include Simple and Standard.
    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 on the right to add or delete a tooltip content display series. Click the or icon to configure the arrangement of multiple tooltip content display series. Click the icon to copy the configuration of the currently selected tooltip content display series 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, in px.
    Content Text	The style of the content text in the tooltip, including the font, weight, size, and color.
    Pop-up Background	The background style of the tooltip pop-up. Background Margin: The horizontal and vertical margin values for the tooltip pop-up background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the border line type, border radius, line width, and border line color.
    Axis Pointer	The style of the axis pointer for the tooltip, including the pointer type, weight, and color. Click the icon to enable or disable 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: 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 Method	The method to select columns. Options include Single-select and Multi-select. If you select Single-select, the click event returns a single data item in object format, and only one column can be highlighted. If you select Multi-select, the click event can return multiple data items in array format, and multiple columns can be highlighted.
    Column Color	The color of a column in the selected state.
    Column Outline	The style of the column outline, including the line type, weight, 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.

  • Interaction Enhancement: If the range column chart contains a large amount of data, you can enable this feature to enhance data interaction. Click the icon to enable or disable the interaction enhancement effect.

    Parameter	Description
    Interaction Method	The data interaction method. Options include Thumbnail Axis and Scrollbar. The Time data type does not support the massive data interaction feature. Note Massive data interaction is not supported for time-based data.
    Default Range	The data range displayed by the thumbnail axis. The value ranges from 0 to 1. This option is available only when the thumbnail axis style is enabled.
    Slider Style	The style of the thumbnail axis slider, including the slider height, foreground color, and background color. This option is available only when the thumbnail axis style is enabled.
    Text Style	The style of the text on the thumbnail axis, including the font, weight, size, and color. This option is available only when the thumbnail axis style is enabled.
    Handle Style	The style of the handles at both ends of the thumbnail axis, including the handle width and height, the default and highlighted background colors, and the border radius and color. This option is available only when the thumbnail axis style is enabled.
    Scrollbar Width	The width of the scrollbar in px. This option is available only when the scrollbar style is enabled.
    Scrollbar Color	The color of the scrollbar, including the foreground and background colors. This option is available only when the scrollbar style is enabled.

• Legend: Specifies the legend style for the range column chart.

  Parameter	Description
  Legend Switch	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. The legend is displayed as a categorical legend only when the Graphic Column Color Mapping Type in the widget's style panel is set to Categorical. Legend Marker: The shape and size of the legend markers. Legend Spacing: The horizontal and vertical distance between different category legends. Max Width: The maximum width of the legend, in px. Enable Paging: Turn on the switch to enable legend paging. If enabled, you can configure the page number and arrow styles for when the legend has too many items and requires paging. If disabled, all legend items are displayed on a single page without paging. Page Number Style: The style of the page numbers, including the font, weight, size, and color. Arrow Style: The size of the arrows in the paging style, and their default and disabled colors.
  Continuous Legend	The style of the continuous legend. The legend is displayed as a continuous legend only when the Graphic Column Color Mapping Type in the widget's style panel is set to Continuous Numerical or Numerical Partition. Slider Style Type: The type of the legend slider track. Options include Rectangle and Triangle. Length: The length of the legend slider track. Height: The height of the legend slider track. Background Color: The background color of the legend slider track. Handle Style: The style of the handles on the legend slider. Minimum: The minimum value of the handle. You can enter a custom value or select Auto to use the minimum value from the data. Maximum: The maximum value of the handle. You can enter a custom value or select Auto to use the maximum value from the data. Size: The size of the handle. Color: The color of the handle. Label Style: The style of the text labels on the legend. Alignment: The alignment of the legend text labels relative to the slider. Options include Align Top, Align Center, and Align Bottom. Spacing: The distance between the legend text labels and the slider.

• Condition: Specifies the condition style.

  Conditional Style: Click the or icon on the right to add or delete a conditional style. Click the or icon to configure the arrangement of multiple conditional styles. Click the icon to copy the configuration of the currently selected conditional style and create a new one with the same configuration. For more information, see Use a condition tree.

  Column Color: Turn on this switch to configure the column color for this conditional style. Turn off this switch to disable the column color configuration for this conditional style.

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.

Field configuration

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 Range column chart widget in the imported nodes pane. The configuration parameters for the range column chart in the Blueprint Editor are displayed on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the range column chart API request is successful	This event is triggered when the data API request is returned and processed by the filter. The processed data is returned 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 range column chart API request fails	This event is triggered when the data API request fails (due to network issues, API errors, etc.) and is processed by the filter. The processed data is returned 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 column in the range column chart. The data item that corresponds to that column is returned.
     When a legend item is clicked	This event is triggered when you click a legend item in the range column chart. The data item that corresponds to that legend item is returned.

   • Actions

     Action	Description
     Request ranged column chart API	Requests data from the server again. Data passed from input data processing nodes or layer nodes is used as parameters. For example, if a ranged column chart has its API data source set to https://api.test and the data passed to the Request ranged column chart API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import ranged column chart data	Processes data according to the component's drawing format, then imports the data into the component to redraw it. This action does not request data from the server. For a data example, see the Data Response area on the Data tab in the component's configuration panel within the canvas editor.
     Highlight	Highlights the element that corresponds to a data item. The following is a data example. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // Fill color } }
     Reset selections	Clears and resets the component's selection data. No parameters are required.
     Update component configuration	Dynamically updates the style configuration of the component. First, in the component's Configuration panel, click Copy Configuration to Clipboard to get the component's configuration data. Then, in the data processing node of the blueprint editor, change the field values for the corresponding styles as needed.
     Show	Shows the component. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component's visibility. The following is 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 is a data example. return{ // The move method. Absolute positioning: to. Relative positioning: by. Default: 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" } }