bar charts

Chart style

Bar charts display multi-dimensional data differences in a compact visualization space. You can select dataset fields and configure data mapping styles.

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 toggle chart margins. When enabled, you can set the distance between the bar chart area and the four boundaries of the widget. Unit: px by default.
  Custom groups	When enabled, configure the trace splitting field in the data panel to split the data at a finer granularity. The data is displayed in a stacked grouping style after splitting. When disabled, data is grouped by the colorField color mapping field in the data panel.
  Intra-Group Spacing	When enabled, sets the spacing between columns in the same category. Unit: pixels. Available in the following cases: Available when Custom Group is enabled. Available when Custom Group is disabled and Display Form is set to Group.
  Inter-group spacing	When enabled, sets the spacing between columns in different categories after data splitting. Unit: px. Available in the following cases: Available when Custom Group is enabled. If you turn off the Custom Group configuration items switch and set the Display Form parameter to Group, you can configure this parameter.
  Display form	Determines how columns are displayed based on the colorField color mapping fields in the data panel. Valid values: Stacked and Grouped. Available only when Custom Group is disabled.
  Column Width	The width of the bar column, in px. Click the icon to toggle column width settings.
  Column color	The color of the column. For more information, see Use the color mapper.
  Pillar glow	The glow effect of the column. Click the icon to toggle column glow settings. Luminous Color: Includes a synchronized column switch and opacity. When synchronous column is disabled, the luminous color can be set separately. Ambiguity Coefficient: The ambiguity coefficient of the column glow. Valid values: 0 to 50. A larger value produces a more diffused glow between columns. Shadow Offset: The horizontal and vertical shadow offsets of the column glow. Unit: px.
  Column Label	The label style of the column. Click the icon to toggle label settings. Label Field: The label field content, which must match the field on the Data tab. By default, the x field value is used. Value Format: The value format of the label. 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 information, see Data display formats. Displayed only when the Label field is set to x. Pre-Suffix: the prefix and suffix of the column tag. 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 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.
  Map	The pattern style of the column. Click the icon to toggle pattern settings. Note The pattern background does not support gradient colors. Type: the type of the sticker. Valid values: Point, Line, Square, and Image. Fill Style: the fill style of the texture map. See the color picker instructions to configure the color style of the map. Stroke Style: Specify the stroke style of the map. See the color picker instructions to configure the color style of the map. This parameter is displayed when you set Type to Dot or Square. Extra Style: Other styles of the map, including Graphics Size, Graphics Spacing, Line Spacing, Rotation Angle, and Interlace. If you set Type to Image, you can set the Image Address, Tile Width, Tile Height, Tile Spacing, and Rotation Angle parameters.

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

  • X-axis

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

    • Display Range: the display range of the minimum and maximum values of the x-axis data.

      Parameter	Description
      Minimum Runtime Duration	The maximum value of the x-axis. You can enter a custom value. You can also select Minimum Value to obtain the minimum value.
      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 x-axis style of the column chart, including the line type, line thickness, and line color. You can click the icon to display or hide 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 column chart x-axis title style. 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 column chart. You can click the icon to control the display of the x-axis label.

      Parameter	Description
      Display Format	The display format of the x-axis label value. 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 Display formats.
      End Spacing	The distance between the x-axis label and 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, text weight, font size, and color of the axis label text.

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

    • Gridline: the style of the column chart x-axis gridline, including the line style, thickness, and color of the gridline. You can click the icon to control the visibility of the x-axis gridline.

      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: When enabled, the Y-axis is visible in the widget. When disabled, the Y-axis is hidden.

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

    • Display Range: the display range of the Y-axis minimum and maximum values. Available only when Data Type is set to Numeric.

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

      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 column chart style of the y-axis title. 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 column chart style of the Y-axis label. You can click the icon to display or hide the Y-axis label.

      Parameter	Description
      Display Format	The display format of the Y-axis label. Valids: 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 Display formats.
      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, text weight, font size, and color of the axis label text.

    • Tick mark: column chart the tick mark style of the Y-axis, 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 Y-axis.

    • Gridlines: the style of the column chart's y-axis gridlines, including the line style, thickness, and color of the gridlines. You can click the icon to control the appearance or concealment of the gridlines 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 configured.

• Animation: the animation effect style of the bar graph.

  • Animation: Set the animation style of the current chart. Click the icon to control the appearance or concealment of the animation.

    • Animation Effect: the type of the animation effect. The system provides a variety of common animation effects for you to select, including Zoom, Move, Horizontal Growth, and Vertical Growth.

    • Animation Duration: the duration of the component animation effect. Unit: ms.

  • Sweep Animation: Set the sweep animation style of the current chart. Click the icon to control the display or concealment of the sweep animation.

    Important

    After the current animation is enabled, interactive features such as Selected become invalid.

    • Highlight Style: You can set the highlight height and intensity of the light-sweeping animation.

    • Dynamic Effect: Set the animation duration and gap of the sweeping animation. Unit: ms.

• Interactive: the interactive effects of the bar chart widget.

  • Carousel: After you enable the carousel feature, the dialog box settings are applied and the dialog box is no longer triggered by interactions. Click the icon to display or hide the carousel effect.

  • dialog box: The style of the dialog box that appears when you move the pointer over or click the column chart on the preview or publish page. 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 content. The name must match the field in the data panel. Display Name: the display name 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 style of the dialog box axis indicator, including the axis indicator type, thickness value, and axis indicator 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.
    Activate a range	dialog box the style of the active area, including additional values for the fill color, transparency, and width adjustment of the area style.

  • Connected Area: the style of the connected area between columns of different categories and the same series of data. It can be triggered by hovering or clicking. Click the icon to control the display of the connected area configuration items.

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

    Important

    When the Sweep Animation feature is enabled, the selected feature is disabled.

    Parameter	Description
    Trigger	The trigger mode of the selected column. This parameter is optional, including Hover and Click.
    Select Method	The selection mode of the column. Valid values: Single and Multiple. In Single-choice mode, the click event returns one data item as an object and only one column is highlighted. In Multiple-choice mode, the click event returns multiple data items as an array and multiple columns can be highlighted.
    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 configured.

  • Interactive Enhancement: If the percentage bar chart contains too much data, you can set the interactive enhancement style. You can click the icon to enable or disable the interactive enhancement effect.

    Important

    When Sweep Animation is enabled, the interaction enhancement feature is disabled.

    Parameter	Description
    How to run the commands	The mode of data interaction. Valid values: Thumbnail Axis and Scroll Bar. Note The time data type. You cannot use the feature to interact with large amounts of data.
    Default Range	The range of data displayed on the thumbnail axis. The range can be from 0 to 1. This option is displayed only if the thumbnail axis style is turned on.
    Rail Style	The style of the thumbnail axis slide, including the height value of the slide, the foreground color of the slide, and the background color. This option is displayed only if the thumbnail axis style is turned on.
    Text Style	The style of the text on the thumbnail axis, including the font content, text weight, font size, and text color. This option is displayed only if the thumbnail axis style is turned on.
    Handle Style	The handle style at both ends of the thumbnail shaft, including the width and height values of the handle, the default color and highlight color of the handle background, the corner value of the handle edge, and the edge color. Note This option is available only when the Thumbnail style is enabled.
    Roller Width	The width of the scroll bar. Unit: pixels. Note This option is available only when the Scrollbar style is enabled.
    Roll bar color	The color of the scroll bar, including the foreground color and background color of the scroll bar. Note This option is available only when the Scrollbar style is enabled.

• Legend: the legend style of the bar chart.

  Parameter	Description
  Legend Switch	When enabled, you can configure the legend style. When disabled, legend configuration is unavailable.
  Legend Position	The position of the legend in relation to the start coordinates 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 style, text weight, font size, and color of the legend text.
  Category Legend	The style of the sub-type legend. The component type legend is displayed only when the Color Mapping Type parameter is set to Noun Classification in the Component Style panel. Legend Marker: the size and shape of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. /p> Maximum Width: the maximum width of the legend. Unit: pixels. Page Flip Allowed: If you turn on the switch, the page number style and arrow style of the legend are enabled. If you turn off the switch, the legend content is displayed on one page and cannot be flipped. Maximum Rows: the maximum number of rows that can be turned. Unit: rows. 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.
  Continuous Legend	The style of the continuous legend. The legend is displayed as a continuous legend only when you set the Color Mapping Type parameter to Numeric Continuous or Numeric Partition in the Component Style panel. Rail Style Type: the type of the sliding track in the legend, including Rectangle and Triangle. Length: the length of the legend slide. Height: the height of the sliding track in the legend. Background Color: the background color of the legend track. Dimension Style: the style of text dimensions on the legend. Alignment: the alignment of legend text dimensions relative to the slide track, including Top Alignment, Center Alignment, and Bottom Alignment. Spacing: the distance between the legend text dimension and the slide.

• 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

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 bar chart interface request is completed	Triggered with the processed JSON data after a data interface request is returned and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     When a data item is selected	Triggered when a bar is clicked, along with the corresponding data item.
     When the legend is clicked	Triggered when a legend item is clicked, along with the corresponding data item.

   • Action

     Action	Description
     Import a bar chart	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request bar chart interface	Requests server data again, using data from an upstream data processing node or layer node as a parameter. For example, if the API data source is https://api.test and the data passed to request bar chart interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. Single highlight { x: 502, y: 'Category A', colorField: 'You' } Bulk Highlight [ { x: 502, y: 'Category A' }, { x: 635, y: 'Category A', colorField: 'Medium' } ] 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	Clears the selected data of the 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	Toggles the visibility of 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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field in the data processing node in Blueprint Editor.