Basic horizontal bar chart (v3.x)

Configuration

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

• Chart

  • Margin

    Parameter	Description
    Top	The distance between the column chart and the top border of the widget.
    Bottom	The distance between the column chart and the bottom border of the widget.
    Left	The distance between the column chart and the left border of the widget.
    Right	The distance between the column chart and the right border of the widget.

  • Max Load: The maximum number of data records to load. The chart loads, lays out, renders, and calculates up to this many records to optimize performance.

  • Column Chart Style: Configures the style of each bar in the chart.

    Background Color: The background color of the bars. For more information about how to change the color, see Color picker description.

  • Value Label: Configures the style of the value label for each bar. You can click the icon to show or hide the value labels.

    Parameter	Description
    Text	The font, weight, font size, and color of the label text.
    Position	The position of the label text. Options are Left, Center, Right, and Outer Right.
    Empty Value Data	Turn on this switch to display labels even when their data value is empty. Turn off this switch to hide labels with empty values.

  • Legend: Configures the style of the chart legend. You can click the icon to show or hide the legend.

    Parameter	Description
    Text	The font, weight, font size, and color of the legend text.
    Layout	The position of the legend items relative to each other. Spacing Horizontal Spacing: The horizontal distance between adjacent legend items. Applies only when there are multiple series. Vertical Spacing: The vertical distance between the legend and the top and bottom borders of the widget and chart. Position: The position of the legend relative to the widget's origin coordinate. Options are Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

• Axes: A component has an X-axis and a Y-axis.

  • x-axis

    • Show x-axis: Turn on this switch to show the x-axis, or turn it off to hide it.

    • Range: The maximum value of the x-axis.

      Maximum: The maximum value on the x-axis. You can enter a custom value or select a system option:

      • Data Maximum: Uses the maximum value from the data.

      • Auto Round: The system automatically calculates the value based on the maximum value, minimum value, and number of data points.

    • Axis Label: Configures the style of the x-axis labels.

      Parameter	Description
      Display Format	The display format for the x-axis label values. Options are Default, 11 (integer), 11.1 (floating-point number), 11.11 (floating-point number), 11%, 11.1%, and 11.11%.
      Text	The font, weight, font size, and color of the axis label text.
      Axis Label Display	The number and unit of the x-axis labels.

    • Axis Line: Configures the style of the x-axis line. You can click the icon to show or hide the x-axis line.

      Color: The color of the x-axis line.

    • Gridline: Configures the style of the x-axis gridlines. You can click the icon to show or hide the x-axis gridlines.

      Color: The color of the x-axis gridlines.

  • y-axis

    • Show y-axis: Turn on this switch to show the y-axis, or turn it off to hide it.

    • Padding on Both Sides: The amount of empty space at the top and bottom of the y-axis. Valid values: 0 to 1.

    • Interval: The interval between bars on the y-axis. A larger value produces thinner bars and wider spacing. Valid values: 0 to 0.95.

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

      Parameter	Description
      Text	The font, weight, font size, and color of the axis label text.
      Axis Label Display	The angle of the y-axis labels. Options are Horizontal, Tilted, and Vertical. The number and unit of the y-axis labels.

    • Axis Line: Configures the style of the y-axis line. You can click the icon to show or hide the y-axis line.

      Color: The color of the y-axis line.

    • Gridline: Configures the style of the y-axis gridlines. You can click the icon to show or hide the y-axis gridlines.

      Color: The color of the y-axis gridlines.

• Series

  Data Series: You can click the or icon on the right to add or delete a data series. You can click the or icon to configure the arrangement of multiple data series.

  Parameter	Description
  Series Name	The name of the data series. If left empty, the widget uses the value of the s field from the data. If specified, ensure the data is returned in the correct order.
  Color	The color of the bars in this series.

• Other

  • Easing Animation: The animation effect for the column chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Animation Settings	Easing Effect: The easing effect for the animation. Several common easing effects are available. Animate Series Sequentially: Turn on this switch to animate each series sequentially. Turn off this switch to animate all bars at the same time.
    Entrance Animation	The duration of the animation when the widget is first rendered, in milliseconds (ms).
    Update Animation	Update Animation Duration: The duration of the animation when the widget data is updated, in milliseconds (ms). Start from Previous Position: Turn on this switch to start the animation from the previous data position when the widget data is updated. Turn off this switch to start from the initial position.

  • Tooltip: Configures the style of the tooltip that appears when you hover over or click a bar on the preview or publish page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Disappear Delay	The delay in milliseconds (ms) before the tooltip disappears after the trigger condition is no longer met.
    Trigger Methods	Trigger Type: The target type that triggers the tooltip. Options include Data Item and Axis. Trigger Action: The action that triggers the tooltip. Options include Hover and Click.
    Text Style	The style of the text in the tooltip, including font, weight, font size, and color.
    Background Box Style	The style of the tooltip's background box. Background Color: The background color of the tooltip. Custom: The width and height of the tooltip, in pixels (px). Click the icon to enable or disable custom sizing. Padding: The internal margin of the tooltip, in pixels (px). Offset Horizontal Offset: The horizontal offset of the tooltip relative to the mouse pointer, in pixels (px). Vertical Offset: The vertical offset of the tooltip relative to the mouse pointer, in pixels (px). Border Border Weight: The thickness of the tooltip border, in pixels (px). Border Color: The color of the tooltip border.

Data

[
  {
    "x": "Inner Mongolia",
    "y": "375",
    "s": "1"
  },
  {
    "x": "Inner Mongolia",
    "y": "180",
    "s": "2"
  },
  {
    "x": "Inner Mongolia",
    "y": "100",
    "s": "3"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "1"
  },
  {
    "x": "Zhejiang",
    "y": "100",
    "s": "2"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "3"
  },
  {
    "x": "Liaoning",
    "y": "25",
    "s": "1"
  },
  {
    "x": "Liaoning",
    "y": "125",
    "s": "2"
  },
  {
    "x": "Liaoning",
    "y": "100",
    "s": "3"
  },
  {
    "x": "Jilin",
    "y": "190",
    "s": "1"
  },
  {
    "x": "Jilin",
    "y": "110",
    "s": "2"
  },
  {
    "x": "Jilin",
    "y": "170",
    "s": "3"
  },
  {
    "x": "Heilongjiang",
    "y": "90",
    "s": "1"
  },
  {
    "x": "Heilongjiang",
    "y": "60",
    "s": "2"
  },
  {
    "x": "Heilongjiang",
    "y": "70",
    "s": "3"
  },
  {
    "x": "Anhui",
    "y": "240",
    "s": "1"
  },
  {
    "x": "Anhui",
    "y": "170",
    "s": "2"
  },
  {
    "x": "Anhui",
    "y": "280",
    "s": "3"
  },
  {
    "x": "Fujian",
    "y": "420",
    "s": "1"
  },
  {
    "x": "Fujian",
    "y": "190",
    "s": "2"
  },
  {
    "x": "Fujian",
    "y": "390",
    "s": "3"
  }
]

Interaction

Select Enable to turn on the interaction feature for the widget. When you click a bar in the basic horizontal bar chart, it triggers a data request, returns a callback value, and dynamically loads data. By default, the x, y, and s values from the data are returned. For more information, see Configure a widget callback ID.

Blueprint editor interaction configuration

1. On the canvas editor page, right-click the widget and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the blueprint editor configuration page, click the Basic Horizontal Bar Chart widget in the import node bar. The configuration parameters for the basic horizontal bar chart in the blueprint editor are shown in the following figure.

   • Events

     Event	Description
     When the Basic Horizontal Bar Chart API Request is Completed	Triggered after the data API request completes and the filter processes the data. The processed JSON data is returned. For more information, see the Data example in this topic.
     When a Data Item is Clicked	Triggered when you click a bar. Returns the data item that corresponds to the clicked bar.

   • Actions

     Action	Description
     Request horizontal basic column chart API	Requests data from the server again. Data from an input data processing node or a layer node is passed as a parameter. For example, if the data source URL is http://api.test, and the data passed to the Request horizontal basic column chart API action is { id: '1'}, the final request becomes http://api.test?id=1.
     Import horizontal basic column chart API	Imports data in the component's drawing format to redraw the component without requesting data from the server again. For more information, see Data example.
     Highlight	Highlights the element that corresponds to the data item. The following code shows a parameter example. { data: { x: 'Shanghai' // List multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Cancel highlight	Removes the highlight from the element that corresponds to the data item. The following code shows a parameter example. { data: { x: 'Shanghai' }, options: { mode: 'single' // If mode is set to single, only one highlight is canceled when multiple data items are hit. If mode is set to multiple, all highlights are canceled. } }
     Clear component	Clears the component data. No parameters required.
     Update component configuration	Dynamically updates the component's style configuration. On the Configuration panel, click Copy configuration to clipboard to obtain the configuration data. Then modify the field values in the data processing node as needed.
     Show	Shows the component. No parameters required.
     Hide	Hides the component. No parameters required.
     Toggle visibility	Toggles the component between visible and hidden. { // true to show, false to hide. "status": true, // Show animation. "animationIn": { // Animation type. Optional value: fade. If left blank, there is no animation. "animationType": "fade", // Show delay in ms. "animationDuration": 1000, // Show animation function. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" }, // Hide animation. "animationOut": { // Animation type. Optional value: fade. If left blank, there is no animation. "animationType": "fade", // Hide delay in ms. "animationDuration": 1000, // Hide animation function. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
     Move	Moves the component to a specified position. { // Move type. to: absolute positioning. by: relative positioning. 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, or easeInOutExpo. "animationEasing": "linear" } }