Column chart

Chart style

A column chart clearly shows the differences in data between and within categories. It occupies a large space in a visualization application. You can select dataset fields and configure various 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.

• Graph

  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.
  Custom Group	If you turn on this switch, you must configure the trace splitting field in the data panel to split data with finer granularity, and the data is then displayed in the Stacking Group style. If you turn off this switch, data is grouped by default based on the colorField color mapping field in the data panel.
  Intra-group Pitch	After the data is split, you can set the spacing between columns within the same category. The unit is px. You can configure this parameter in the following cases: This can be configured when you turn on the Custom Grouping configuration item. This option is configurable when the Custom Grouping configuration item switch is turned off and the Display Mode is Group.
  Group Pitch	After the data is split, you can set the spacing between columns in different categories. The unit is px. You can configure this parameter in the following cases: Configurable when you enable the Custom Grouping configuration item. You can configure this option when the Custom Grouping configuration item is disabled and the Display Mode is set to Grouped.
  Display Style	Specifies the display style, either Stacking or Grouping, for bars that are grouped by the colorField (color mapping field) in the data panel. This setting can be configured only when the Custom Grouping configuration item is turned off.
  Column Width	The width of the columns in px. Click the icon to show or hide this configuration item.
  Column Border Radius	The border radius value in pixels for the four corners of the column.
  Column Color	The color of the columns. For more information, see Color mapper guide to configure the mapping color styles for different columns.
  Connecting Area	The style of the connection area between columns of the same series across different categories is triggered by Hovering and Clicking. Click the icon to show or hide the configuration items.
  Pillar Annotation	The style of the column labels. Click the icon to show or hide this configuration item. Annotation Field: The content of the annotation must correspond to the content of the field in the data panel. By default, the content of the 'y' field is retrieved. Numerical Format: Sets the numerical format for the labels. The options are 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 data display formats, see Data Display Formats. This option is available only when y is selected for the label field. Prefix And Suffix: Set the prefix and suffix for the bar annotations. Annotation Position: Select the display position of the annotated content. You can select Top, Middle, or Bottom. Relative Offset: The offset of the bar annotation from the bar in the vertical and horizontal directions. The unit is px. Text Style: The text style for bar annotations, including font, font weight, font size, and color. Text Outline: The outline style for the text of bar labels, including its thickness and color.
  Texture	The texture style of the columns. Click the icon to show or hide this configuration item. Type: The type of the texture map, including Point, Line, and Square. Fill Style: Specifies the fill style for the texture map. To configure the color style, see Color Picker Instructions. Outline Style: Sets the outline style of the texture map. To configure the color style, see Color Picker Description. This option is displayed when the type is set to Point or Square. Additional Styles: Other styles for the texture map, including Graphic Size, Graphic Spacing, Line Spacing, Rotation Angle, and the Interlace switch.

• Coordinates: The coordinate axes of a widget include the X-axis and the Y-axis.

  • X-axis

    • X-axis Display: When enabled, the x-axis is displayed in the widget. When disabled, the x-axis is hidden.

    • Data Type: The data type for the x-axis, which can be Category or Time.

    • Axis Line: Configures the style of the x-axis line for the column chart, including its shape, thickness, and color. You can click the icon to show or hide the x-axis line.

    • Axis Title: Configures the style of the x-axis title for the column chart. 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 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 Marks: Configures the style of the x-axis tick marks for the column chart, including their length, thickness, and color. You can click the icon to show or hide the x-axis tick marks.

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

      Parameter	Description
      Display Format	The desired data display format. This is only effective for time-based data. For time, use YYYY/MM/DD HH:mm:ss. For integers, use d. For floating-point numbers, use .1f.
      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 number of x-axis labels, the prefix and suffix content, the angle, the offset, and the alignment.
      Text Style	The font, weight, size, and color of the x-axis label text.

    • Gridline: Configures the style of the x-axis gridlines for the column chart. This includes the line style, thickness, color, length, and the pitch between gridlines. You can click the icon to show or hide the x-axis gridlines.

  • Y-axis

    • Y-axis Display: When enabled, the y-axis is displayed. When disabled, the y-axis is hidden.

    • Display Range: The display range for the minimum and maximum data values on the y-axis.

      Parameter	Description
      Minimum	The minimum value of the y-axis. You can enter a custom value or select a system option: 0: The default minimum value for the y-axis is 0. Data Minimum: Uses the minimum value in the data.
      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 for the column chart, including its shape, thickness, and color. You can click the icon to show or hide the y-axis line.

    • Axis Title: Configures the style of the y-axis title for the column chart. 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 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 Marks: Configures the style of the y-axis tick marks, including their length, thickness, and color. You can click the icon to show or hide the tick marks.

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

      Parameter	Description
      Display Format	The display format for the values on the y-axis labels. The available options are 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 data display formats, see Data display formats.
      Padding At Both Ends	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 content, the angle, the offset, and the alignment.
      Text Style	The font, weight, size, and color of the y-axis label text.

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

• Animation: Configures the animation style for the column chart.

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect for the column chart.
  Animation Effect	The system provides several common animation effects, including Horizontal Grow, Vertical Grow, Scale In, and Slide In. This setting can be configured only after the animation switch is turned on.
  Animation Duration	The duration of the widget animation effect in milliseconds (ms). This parameter can be configured only after you turn on the animation switch.

• 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 publish page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The pattern of the prompt. This parameter is optional, and the valid values are Simple and General.
    Trigger Methods	The method to trigger the tooltip. This setting is optional and includes Hover and Click.
    Display Position	The position of the tooltip. This parameter is optional. Valid values are 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	This section is displayed when Mode is set to General. Click the or icon on the right to add or delete a tooltip content display series. Click the or icon to configure the layout 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 name of the field for the tooltip content. This name must match a field in the data panel. Display Name: The display name for the content in the tooltip. 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.
    Suffix	The suffix style for the content text in the tooltip.
    Pop-up Background	The background style of the tooltip dialog box. Background Margin: The horizontal and vertical margin values for the tooltip background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the border line type, border radius, border width, and border color.
    Axis Indicator	The style of the tooltip's axis pointer, including the type, thickness, and color. Click the icon to enable or disable the axis pointer. Note When you select Dashed Line or Dotted Line, you can also configure the length of the dashes and the spacing between them.

  • Selected State: Configures the style that is applied to a column when it is selected. You can click the icon to enable or disable this style.

    Parameter	Description
    Trigger Methods	The method that triggers an action when a column is selected. This setting is optional and includes Hover and Click.
    Selection Mode	The method for selecting bars, which is optional, includes Single Select and Multi-select. When you select Single Select, a click event returns a single data item as an object, and only one bar can be highlighted. When you select Multi-select, a click event can return multiple data items as an array, and multiple bars can be highlighted.
    Bar 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.

  • Interaction Enhancement: When a column chart contains a large amount of data, you can enable this option to enhance interactions. You can click the icon to enable or disable this feature.

    Parameter	Description
    Interaction Mode	The data interaction method. You can select Overview Axis or Scroll Bar. 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 displayed only when the thumbnail axis style is enabled.
    Slider Style	The style of the thumbnail axis slider, including the height, foreground color, and background color. This option is displayed 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 displayed only when the thumbnail axis style is enabled.
    Handle Style	The style of the handles at both ends of the thumbnail axis, including their width and height values, default background and highlight colors, and border radius value and border color. This option is displayed only when the Thumbnail Axis style is enabled.
    Scroll Bar Width	The width of the scroll bar, in pixels. This option is displayed only when the Scroll Bar style is enabled.
    Scroll Bar Color	The color of the scroll bar, including the foreground and background colors. This option is displayed only when the Scroll Bar style is enabled.

• Legend: Configures the legend style for the column chart.

  Parameter	Description
  Legend Switch	Turn on the switch to configure the legend style. Turn off the switch to disable legend configuration.
  Legend Position	The position of the legend relative to the origin coordinate of the widget. You can select Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, or 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.
  Classification Legend	The style of the categorical legend. This type of legend is displayed only when Graphics > Bar Color > Mapping Type in the widget style panel is set to Categorical. Legend Marker: The shape and size of the legend marker. Legend Spacing: The horizontal and vertical distance between legends of different categories. Maximum Width: Specifies the maximum width of the legend in px. Enable Pagination: Turn on this switch to enable legend pagination. You can configure the styles of page numbers and arrows for when there are too many legend items to display on one page. Turn off this switch to display all legend items on a single page without pagination. Maximum Rows: The maximum number of rows to display in the legend. If the number of rows exceeds this value, the legend is paginated. Page Number Style: Specifies the font, font weight, font size, and color of the page numbers. Arrow Style: The size, default color, and disabled color of the pagination arrows.
  Continuous Legend	A legend is displayed as a continuous legend only when Graph > Bar Color > Mapping Type in the widget style panel is set to Continuous Value or Value Partition. Slider Style Type: The type of the legend slider track, including Rectangle and Triangle. Length: The length of the legend slider. Height: The height of the legend slider. Background Color: The background color of the legend slider track. Slider Style: The style of the handle on the slider track in the legend. Minimum: The minimum value of the slider. You can enter a custom value or select Automatic to use the minimum value from the data. Maximum: The maximum value for the slider. You can enter a custom value or select Automatic to use the maximum value from the data. Size: The size of the slider. Color: The color of the slider. Annotation Style: The style of the text annotations on the legend. Alignment: The alignment of the legend labels relative to the slider, including Top, Center, and Bottom. Pitch: The distance between the legend text annotation and the slider.

• Condition: Configures conditional styles.

  Conditional Style: On the right, you can click the or icon to add or delete a conditional style. You can click the or icon to configure the layout of multiple conditional styles. You can click the icon to copy the configuration of the selected conditional style to a new style. For more information, see Instructions for conditional trees.

  • Bar Color: Turn on this switch to configure the column color for the conditional style. If this switch is turned off, you cannot configure the column color.

  • Reference Line: Turn on this switch to configure the reference line for this conditional style, including its name, text style, and line style. This feature is effective only when the condition item is x or y, such as y > 30.

Data panel (default mode)

Field descriptions

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 descriptions

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 Column Chart widget in the Import Nodes bar. The blueprint editor configuration parameters for the column chart appear on the canvas, as shown in the following figure.

   • Event

     Event	Description
     When the Column Chart API Request Completes	This event is triggered after a data API request is returned and processed by a filter. The processed data is then emitted in JSON format. For a data example, see the Data Response Result section on the Data tab in the Settings panel of the widget.
     When the Column Chart API Request Fails	When a data API request fails, such as due to network issues or API errors, this event is triggered after the response is processed by a filter. The event provides the processed data in JSON format. For a data example, see the Data Response section on the Data tab in the Settings panel of the widget.
     When a Data Item Is Selected	This event is triggered when you click a column in the column chart. The data item that corresponds to that column is also emitted.
     When a Legend Item Is Clicked	This event is triggered when you click a legend item in the column chart. The data item that corresponds to that legend item is also emitted.

   • Actions

     Action	Description
     Request Column Chart API	Requests data from the server again, using data output by upstream data processing nodes or layer nodes as parameters. For example, if a column chart is configured with the API data source https://api.test, and the data passed to the Request Column Chart API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Import Column Chart Interface	After the data is processed in the format required by the component, the component is imported and redrawn without requiring a new request for server-side data. For data examples, see the Data Response area on the Data tab of the settings panel to the right of the component in the canvas editor.
     Highlight	Highlights the element corresponding to a data item. The following is a sample reference data. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // Fill color } }
     Reset Selection	Clears and resets the widget's selected items. No parameters are needed.
     Update Widget Configuration	Dynamically updates the style configuration of a component. First, click Copy Configuration To Clipboard in the component's Configuration panel to obtain the component configuration data. Then, as needed, change the field values for the corresponding styles in the data processing node on the blueprint editor configuration page.
     Display	Shows the widget. The following is a sample reference data. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following is a sample reference data. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget. The following is a sample reference data. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following is a sample reference data. 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 delay. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }