Stacked column chart (versions earlier than 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.
• 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.

• Global settings

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

  • Column style

    • Column gap: Sets the gap between columns. The value must be between 0 and 1.

    • Outer padding: Specifies the distance between the outermost columns and the left and right borders of the widget. The value must be between 0 and 1.

    • Column background: Specifies the background color of the columns. For more information, see Color picker.

  • Margin

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

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

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

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

  • Data label: Sets the style of the data label for each column. Click the icon to show or hide the data labels.

    • Text style

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

      • Font color: The font color of the data label text.

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

    • Position: The position of the data labels. Options: Top, Center, and Bottom.

    • Empty data: Enable this option to display labels for data points with a value of 0.

    • Load limit: Specifies the maximum number of data records to load, render, and calculate. This helps ensure optimal performance and rendering of the visualization.

• x-axis: Configures the x-axis. Click the icon to show or hide the x-axis.

  • Text style

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

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

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

  • Axis label: Specifies the style of the x-axis labels. Click the icon to show or hide the labels.

    • Angle: The display angle of the axis labels. Options: Horizontal, Slant, and Vertical.

    • Quantity: The maximum number of labels to display on the x-axis.

      Note

      If you set Quantity to 0, the system automatically determines the number of labels based on the widget data.

  • Axis line: Specifies the style of the x-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: Specifies the style of the grid lines for the x-axis. Click the icon to show or hide the grid lines.

    Color: The color of the grid lines.

• y-axis: Configures the y-axis. Click the icon to show or hide the y-axis.

  • Text style

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

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

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

  • Axis label: Specifies the style of the y-axis labels. Click the icon to show or hide the axis labels.

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

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

      • Automatic rounding: Automatically rounds the value based on the maximum and minimum data values and the number of axis labels.

    • Quantity: The number of axis labels.

    • Display format: The display format of the axis labels. You can enter a custom format or select a system format. If you select Auto, the system displays the data in its original format.

  • Unit: The unit of the y-axis. You can enter a custom unit. Click the icon to show or hide the unit.

  • Axis line: Specifies the style of the y-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: Specifies the style of the grid lines for the y-axis. Click the icon to show or hide the grid lines.

    Color: The color of the grid lines.

• Legend: Configures the chart legend. Click the icon to show or hide the legend.

  • Text style

    • Font size: The font size of the legend text.

    • Font color: The font color of the legend text.

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

  • Layout: The layout of the legend items.

    • Spacing

      • Horizontal interval: The horizontal distance between adjacent legend items. This setting applies only when there are multiple data series.

      • Vertical interval: The vertical distance between the legend and the top border of the widget and chart.

    • Position: The position of the legend relative to the top-left corner of the widget. Options: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

• Tooltip: Configures the tooltip that appears when you hover over or click a column in the chart in the preview or on the published page.

  • Trigger type: The type of element that triggers the tooltip. Options: Data item and Axis.

  • Trigger action: The action that triggers the tooltip. Options: Hover and Click.

  • Hide delay: The delay in milliseconds (ms) before the tooltip hides after the trigger condition ends.

  • Container style: The style of the tooltip container.

    • Background Color: The background color of the tooltip.

    • Custom container 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, in pixels (px).

    • Vertical offset: The vertical offset of the tooltip relative to the mouse pointer, 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 in the tooltip.

    • Font color: The color of the tooltip text.

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

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

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

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

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

    • Line style: The color, width, and type of the indicator line. Options: Solid, Dashed, and Dotted.

• Data series: Click the or icon to add or delete a data series.

  • Series name: The name of the data series. You can enter a custom name. If this field is empty, the widget uses the value of the s field from the data as the series name. If you specify a name, you must ensure the data is returned in the correct order.

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

• Animation: Specifies the animation style of the columns. Click the icon to enable or disable the animation.

  • Initial duration: The duration of the initial rendering animation for the widget, in milliseconds (ms).

  • Easing: The easing effect for the animation. The system provides a variety of common animation easing effects.

  • Animate series in sequence: If enabled, animations for each data series play sequentially. If you disable this option, the animations for all columns play simultaneously.

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

  • Update from previous position: If you enable this option, the animation starts from the previous data position when the widget data is updated. If you disable this option, the animation starts from the initial position when the widget data is updated.

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 enable the interaction feature for the widget. When you click a column in the stacked column chart, a data request is triggered, and a callback value is passed to dynamically load data for different columns. By default, the x, y, and s values from the data are passed. For more information about the configuration, see Configure a callback ID for a widget.

Blueprint Editor

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 configuration page of the Blueprint Editor, click the stacked column chart component in the Imported Nodes pane to view its configuration parameters on the canvas.

   • Events

     Event	Description
     When the data request for the stacked column chart is complete	This event triggers after a data API request returns and a filter processes it. The event passes the processed data in JSON format. For a data example, see the Data section of this topic.
     When a data item is clicked	This event triggers when you click a column. It passes the data item that corresponds to the clicked column.

   • Actions

     Actions	Description
     Request data for the stacked column chart	Reruns a data request from the server, using data from upstream nodes as a parameter. For example, if the API data source for the stacked column chart is configured as http://api.test and the data passed to the Request data for the stacked column chart action is { id: '1'}, the final API request is http://api.test?id=1.
     Import data for the stacked column chart	Processes data in the format required by the widget, imports the data into the widget, and redraws the chart. This action does not rerun a request for data from the server. For a data example, see the Data section of this topic.
     Highlight	Highlights the element corresponding to a data item. The following code provides an example of the parameters. { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Unhighlight	Removes the highlight from the element corresponding to a data item. The following code provides an example of the parameters. { data: { x: 'Shanghai' }, options: { mode: 'single' // If mode is set to 'single', only one item is unhighlighted when multiple data items match. If mode is set to 'multiple', all matching items are unhighlighted. } }
     Update widget configuration	Dynamically updates the widget's style configuration. First, click Copy Configuration to Clipboard in the widget's Settings panel to obtain the widget configuration data. Then, change the field values for the corresponding styles in a data processing node on the Blueprint Editor configuration page as needed.
     Show	Shows the widget. No parameters are required.
     Hide	Hides the widget. No parameters are required.
     Toggle visibility	Toggles the visibility of the widget. { // A value of true shows the widget, and false hides it. "status": true, // Show animation. "animationIn": { // Animation type. Set to 'fade' for a fade animation. If left empty, there is no animation. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Animation easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" }, // Hide animation. "animationOut": { // Animation type. Set to 'fade' for a fade animation. If left empty, there is no animation. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Animation easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. { // Move type. 'to' for absolute positioning, 'by' for relative positioning. Default value: 'to'. "positionType": "to", // The target position, specified by x- and y-coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }