Grouped column chart (versions before v3.0)

Settings

• 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.
• Chart size: Specifies the width and height of the widget in pixels (px). You can click to lock the aspect ratio. When locked, the width and height change proportionally. Click the icon again to unlock it.
• Chart position: Specifies the x-coordinate and y-coordinate of the widget in pixels (px). The x-coordinate is the distance from the top-left corner of the widget to the left edge of the page. The y-coordinate is the distance from the top-left corner of the widget to the top edge of the page.
• Rotation Angle: Rotates the widget around its center point in degrees (°).
  • Enter a value to set the rotation angle.
  • Drag the black dot on the icon to adjust the rotation angle.
  • Click the icon to flip the widget horizontally.
  • Click the icon to flip the widget vertically.
• Opacity: Specifies the transparency of the widget. The value must be in the range [0, 1]. A value of 0 makes the widget completely transparent, and a value of 1 makes it fully opaque. The default is 1.

• Global style

  • Font Family: Specifies the font family for all text in the chart. The default is Microsoft YaHei.

  • Bar style: Specifies the style of each column in the chart.

    • Inner Padding: The space between columns. The value is in the range [0, 1].

    • Outer Padding: The space between the outermost columns and the left and right borders of the widget. The value is in the range [0, 1].

    • Background Color: The background color of the columns. For more information, see Color picker configurations.

  • Margin: The distance between the chart area and the widget borders.

    • Top: The distance between the top of the columns and the top border of the widget.

    • Bottom: The distance between the bottom of the columns and the bottom border of the widget.

    • Left: The distance between the leftmost column and the left border of the widget.

    • Right: The distance between the rightmost column and the right border of the widget.

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

    • Text style

      • Font Size: The font size of the label text.

      • Color: The color of the label text.

      • Font weight: The font weight of the label text.

    • Vertical Offset: The vertical offset of the label from the top of the column. A negative value moves the label up, and a positive value moves it down.

    • Horizontal Offset: The horizontal offset of the label from the left side of the column. A negative value moves the label left, and a positive value moves it right.

  • Maximum Records to Load: Specifies the maximum number of data records to load for layout, rendering, and calculation to ensure visualization performance.

• X-axis: The style of the x-axis. You can click the icon to show or hide the x-axis.

  • Text style

    • Color: The color of the x-axis text.

    • Font Size: The font size of the x-axis text. The value is in the range [10, 100].

    • Font weight: The font weight of the x-axis text.

  • Tick Length: The length of the x-axis ticks. The value is in the range [0, 40].

  • Label Distance from Axis: The distance between the x-axis labels and the axis line. The value is in the range [-40, 40].

  • Axis line: Turn on this switch to display the x-axis line.

• Y-axis: The style of the y-axis. You can click the icon to show or hide the y-axis.

  • Text style

    • Color: The color of the y-axis text.

    • Font Size: The font size of the y-axis text. The value is in the range [10, 100].

    • Font weight: The font weight of the y-axis text.

  • Unit: The unit for the y-axis values.

  • Min: The minimum value of the y-axis. You can enter a custom value or select one of the following options:

    • 0

    • Minimum data value: Uses the minimum value from the data.

    • Automatic rounding: The system automatically calculates a rounded value based on the data range and the number of ticks.

  • Max: The maximum value of the y-axis. You can enter a custom value or select one of the following options:

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

    • Automatic rounding: The system automatically calculates a rounded value based on the data range and the number of ticks.

  • Number of ticks: The number of ticks on the axis.

  • Label Distance from Axis: The distance between the y-axis labels and the axis line. The value is in the range [-40, 40].

  • Axis line: Turn on the switch to display the y-axis line.

• Tooltip: The style of the tooltip that appears when you hover over or click a column in the chart on the preview or publishing page.

  Figure 1. Tooltip panel

  Figure 2. Tooltip example

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

  • Disappear Delay: The delay in milliseconds (ms) before the tooltip disappears after the trigger condition is no longer met.

  • Background Style: The style of the tooltip's background box.

    • Background Color: The background color of the tooltip.

    • Custom Background Size: The width and height of the tooltip in pixels (px).

    • Padding: The internal padding of the tooltip in pixels (px).

    • Horizontal Offset: The horizontal offset of the tooltip relative to the mouse pointer's position, in pixels (px).

    • Vertical Offset: The vertical offset of the tooltip relative to the mouse pointer's position, in pixels (px).

    • Border Color: The border color of the tooltip.

    • Border Width: The border width of the tooltip in pixels (px).

  • Text style: The style of the text inside the tooltip.

    • Color: The color of the tooltip text.

    • Font Family: The font family of the tooltip text.

    • Font Size: The size of the tooltip text.

    • Font weight: The font weight of the tooltip text.

  • Axis pointer: The style of the axis pointer that is displayed when a trigger action is performed and the trigger type of the tooltip is set to axis.

    • Type: The type of the axis pointer. Only Line Pointer is currently supported.

    • Line Style: Specifies the color, width, and type of the pointer line. Type options include Solid, Dashed, and Dotted.

• Series: Click the or icon on the right to add or delete a data series.

  • Color: The color of the columns in this series.

  • Series to Type

    • When enabled, the chart switches from series mode to type mode. This mode requires an s field in your data to define the column's type. The style of each column is determined by its type, and each category can display only one type.

    • When disabled, the chart displays data in series mode. This mode also requires an s field in your data. For example, if you configure two series, the chart displays two columns for each category and reserves a placeholder for a column even if its value is 0.

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

  • Initial Animation Duration: The duration of the initial rendering animation in milliseconds (ms).

  • Easing: The easing effect of the animation. You can select from various common easing effects.

  • Animate Series Sequentially: If enabled, animations for each series play in sequence. If disabled, all column animations play simultaneously.

  • Update Animation Duration: The duration of the animation when the widget's data is updated, in milliseconds (ms).

  • Update from Previous Position: If enabled, the animation starts from the previous data position when the data is updated. If disabled, the animation starts from the initial position.

Data

[
  {
    "x": "Shanghai",
    "y": 23
  },
  {
    "x": "Shenzhen",
    "y": 13
  },
  {
    "x": "Hefei",
    "y": 2
  },
  {
    "x": "Chengdu",
    "y": 9
  },
  {
    "x": "Anhui",
    "y": 5
  },
  {
    "x": "Beijing",
    "y": 10
  },
  {
    "x": "Hangzhou",
    "y": 14
  },
  {
    "x": "Changsha",
    "y": 24
  }
]

Interaction

Select Enable to turn on the widget interaction feature. When you click a column in the Grouped Column Chart, a data request is triggered and a callback value is emitted to dynamically load data for that column. By default, the x, y, and s values from the data are emitted. For more information, see Widget Callback ID Configuration.

Blueprint Editor interaction configuration

1. In the canvas editor, 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 Grouped Column Chart widget in the import node pane. The canvas then displays the configuration parameters for the Grouped Column Chart, as shown in the following figure.

   • Events

     Event	Description
     When Data API Request is Successful	This event triggers after the data API request returns and the filter processes it. It passes the processed data in JSON format. For a data example, see the Data section of this document.
     When a Data Item is Clicked	This event triggers when a user clicks a column in the chart. It passes the data item for that column.

   • Actions

     Action	Description
     Request Grouped Column Chart Data	Re-requests data from the server, using the data output by upstream data processing nodes or layer nodes as parameters. For example, if a Grouped Column Chart is configured with an API data source of http://api.test, and the data passed to the Request Grouped Column Chart Interface action is { id: '1'}, then the final request URL is http://api.test?id=1.
     Import Grouped Column Chart Data	Processes data according to the widget's rendering format and then imports the data to redraw the widget. This does not require another request for server-side data. For a data example, see the Data section of this document.
     Highlight	Highlights the element corresponding to a data item. The following code provides a parameter example. { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Clear Highlight	Clears the highlight from the element corresponding to a data item. The following code provides a parameter example. { data: { x: 'Shanghai' }, options: { mode: 'single' // If 'single', only one highlight is cleared if multiple data items match. If 'multiple', all highlights are cleared. } }
     Update widget configuration	Dynamically updates the style configuration of the widget. You must first click Copy Configuration to Clipboard in the widget's Settings panel to obtain the configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint Editor page as needed.
     Show	Shows the widget. No parameters are required.
     Hide	Hides the widget. No parameters are required.
     Toggle Visibility	Toggles between showing and hiding the widget.
     Move	Moves the widget to a specified position. { // Movement type. "to" for absolute positioning, "by" for relative. Default: "to". "positionType": "to", // Target position specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Animation easing curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }