symmetrical-bar-charts

Chart style

A symmetrical bar chart is a type of bar chart that compares two data categories side by side, making differences between categories easy to identify.

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 bar graph area and the four boundaries of the widget. Unit: px by default.
  Symmetric classification	The text labels for the two categories in the bar chart.
  Column Width	The width of the column, in px. Click the icon to toggle the column width configuration.
  Column color	The color of the column. For more information, see Use the color mapper.
  Column callout	The label style of the column. Click the icon to control the display of the label configuration items of the column. Label Field: The content of the label must match the content of the field in the data panel. You can select x, x+y, or y. By default, the content of the x field is retrieved. x: If you select the x field, you can customize the prefix and suffix of the x field and the style of the value display format of the x field. x + y: If you select the x + y field, you can customize the prefix and suffix of the x and y fields, the style of the value display format of the x + y field, and whether to display the content in a broken line when the two tag values are displayed. y: If you select the y field, you can customize the prefix and suffix of the y field. Value Format: Set the value format of the label. You can select 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 you select x or x + y for the label field. Fold: If two tag values are displayed, the tag values can be folded. Displayed only when x+y is selected for the callout field. Label Position: Select a position to display the label content. You can select Left, Middle, or Right. Relative Offset: The vertical and horizontal offsets of the columns. Unit: pixels. Text Style: the text style of the column label, 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 line.

• Coordinates: the three coordinate axes of a widget: X1 axis, X2 axis, and Y axis.

  • X1 axis

    • X1 Axis Display: If you turn on the switch, the X1 axis style in the widget is visible. If you turn off the switch, the X1 axis style in the widget is invisible.

    • Display Range: the display range of the minimum and maximum values of the X1 axis.

      Item	Example value
      Minimum Runtime Duration	The minimum value of the x1 axis. You can specify a custom value. You can also select Minimum Value to obtain the minimum value.
      Maximum Runtime Duration	The maximum value of the X1 axis. You can specify a custom value. You can also select Maximum Data Value to obtain the maximum value.

    • Axis: the X1 axis style of the bar chart, including the line type, line thickness, and line color. You can click the icon to display or hide the X1 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 X1 axis title style of the bar chart. You can click the icon to display the X1 axis title.

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

    • Axis Label: the axis label style of the bar 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 label value of the X1 axis. You can select 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 parameter is available only when you set Data Type to Numeric.
      End Spacing	The distance of the X1 axis label from the two ends of the axis, in %.
      Label Display	The display style of the label, including the expected number of ticks for the axis label, 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, weight, font size, and color of the axis label text.

    • Tick Marks: the tick mark style of the x1 axis of a bar chart, including the length, thickness, and color of the tick mark. You can click the icon to display or hide the tick mark style of the x1 axis.

    • Gridlines: the style of the gridlines on the X1 axis of a bar chart, including the line style, weight, color, length, and spacing value of the gridlines. You can click the icon to display or hide the gridlines on the X1 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.

  • X2 Axis: For more configuration items, see X1 Axis.

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

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

    • Display Range: the display range of the minimum and maximum values of the Y-axis. This field is available only when you select Numerical configuration items Data Type.

      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 bar chart, including the line type, line thickness, and line style. You can click the icon to control the Y-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 Y-axis title style of the bar chart. You can click the icon to control whether the Y-axis title is visible or hidden.

      Parameter	Description
      Title Display	The text content of the y-axis title display.
      Display mode	The display mode of the y-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 text color of the title text on the Y axis.

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

      Parameter	Description
      Display Format	The display format of the Y-axis label value. You can select 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 parameter is available only when you set the Data Type parameter to Numeric.
      End Spacing	The distance between the two ends of the Y-axis label from the axis, in %.
      Label Display	The display style of the label, including the number of axis labels, 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, weight, font size, and color of the axis label text.

    • Tick Mark: the tick mark style in the Y-axis of a bar chart, including the length, thickness, and color of the tick mark. You can click the icon to display or hide the tick mark style in the Y-axis.

    • Gridlines: The style of the y-axis gridlines in the bar chart, including the line style, weight, color, length, and spacing. You can click the icon to show or hide the gridlines on 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 effect style of the symmetrical bar chart.

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect of the symmetrical bar chart.
  Animation	The type of the animation. The system provides you with a variety of common animation effects, including Default, Horizontal Growth, Vertical Growth, Zoom, and Fading. You can configure 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.

• Interactive: the interaction style of the symmetrical bar widget.

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

    Parameter	Description
    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 distance between the title text in the dialog box. Unit: pixels.
    Title Text	The style of the title text in the dialog box, including the style of the text font, the weight of the text, the font size, and the color of the text.
    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 content. 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	The background style of the dialog box. 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 display style of the dialog box axis indicator, including the indicator type, thickness, and color. 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 bar that is selected. The value can be Hover or Click.
    Select Method	The method that is used to select the bar. The value can be Single or Multiple. If you select Single-choice, the click event only throws one piece of data. The data format is an object and only one column can be highlighted. If you select Multiple-choice, the click event throws multiple pieces of data. The data format is an array and multiple columns can be highlighted.
    Column color	The color of the bar in the selected state.
    Pillar Stroke	The stroke style of the bar column, including the stroke type, line thickness, and stroke 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 configured.

• Legend: the legend style of the symmetrical bar 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 widget origin. Valid values: 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, weight, font size, and color of the legend text.
  Category Legend	The style of the sub-type legend. Legend Mark: the shape style and size of the legend mark. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: Specify 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. 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.

• Condition: the description of the condition style.

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

  Column Color: the color of the bar under the current conditions.

Data Sources panel

Advanced Panel

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. Refer to the blueprint configuration parameters.

   • Event

     Event	Description
     When the symmetric bar chart interface 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 a symmetrical bar chart is clicked, and the data item corresponding to the column is also raised.
     When the legend is clicked	The event that is raised when the legend of a symmetrical bar chart is clicked, and the corresponding data item of the legend is also raised.

   • Action

     Action	Description
     Import a symmetric bar 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 a symmetric bar chart	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 for a symmetric bar chart is https://api.test and the data transferred to the Request Symmetric Bar 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 { 'x1': 1367.4, y: 'uruguay' } Bulk Highlight [ { 'x1': 1367.4, y: 'uruguay' }, { 'x2': 3456.3, y: 'paraguay' } ] 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	Resets the selection. 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" } }
     Switch Display /Display	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 specify this parameter, no animation is generated. "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. After that, change the style field for the data processing node in Blueprint Editor.