Dual-axis chart (v2)

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.

• Global styles

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

  • Margin: The distance between the chart and the widget's borders on all four sides, in pixels (px).

  • Empty data: If enabled, null or missing data points are treated as zero, causing the line to connect to the zero point on the axis. If disabled, a gap appears in the line.

    Figure 1. Empty data enabled

    Figure 2. Empty data disabled

  • Max load: The maximum number of data records to load. To ensure optimal performance, the system loads only this number of records for layout and rendering.

• x-axis: The style of the x-axis. Click the icon to show or hide the x-axis.

  • Text

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

    • Font size: The font size of the x-axis text, ranging from 10 to 100.

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

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

    Note

    A mismatch between the source data format and the specified format settings will cause the widget to render incorrectly.

    • Data type: The data type of the x-axis labels. Options include:

      • Numeric: Supports numerical data types, such as integers and floating-point numbers.

      • Category: Supports categorical data types, such as characters and strings.

      • Time: Time-based data. You must specify the data format.

    • Data format: The format of the source data. This setting applies only to the Time data type. Configure the format using a syntax such as %Y/%m/%d %H:%M:%S.

    • Display format: The display format for the data. For time values, use a format such as %m/%d%Y%H:%M:%S. For integers, use d. For floating-point numbers, use .1f.

    • Boundary gap: If enabled, blank space is added to both ends of the x-axis.

    • Gap size: The size of the blank space. The value must be between 0 and 1. This setting applies only when Boundary gap is enabled.

    • Max: The maximum value of the x-axis. You can enter a custom value. The default is auto, which automatically sets the range based on the data.

    • Min: The minimum value of the x-axis. You can enter a custom value. The default is auto, which automatically sets the range based on the data.

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

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

    • Angle: The angle of the x-axis labels. Options are Horizontal, Slanted, and Vertical.

    • Axis line: The color and visibility of the axis line.

    • Grid lines: The color and visibility of the grid lines.

• y-axis

  The left vertical axis. Its configuration is similar to the x-axis. For more information, see the x-axis section.

• z-axis

  The right vertical axis. Its configuration is similar to the x-axis. For more information, see the x-axis section.

• Legend: The style of the chart legend. Click the icon to show or hide the legend.

  • Text

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

    • Color: The color of the legend text.

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

  • Layout

    • Spacing

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

      • Vertical spacing: The vertical distance between the legend and the widget's top and bottom borders.

    • Position: The position of the legend relative to the widget's starting coordinates.

• Tooltip: The style of the tooltip that appears when you hover over or click a data point in preview or published mode. Click the icon to show or hide the tooltip.

  Figure 3. Tooltip panel

  Figure 4. Tooltip example

  • Trigger type: The element that triggers the tooltip. Options are Data Item and Axis.

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

  • Disappear delay: The delay in milliseconds (ms) before the tooltip disappears after the trigger action ends.

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

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

    • Vertical offset: The vertical offset of the tooltip relative to the cursor, 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: 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: The style of the axis pointer shown when the tooltip is triggered by the axis.

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

    • Indicator line style: The color, width, and type of the indicator line. Line type options are solid, dashed, and dotted.

• Series y, Series z

  Note

  A dual-axis chart has two default series, which configure the data and styles for the y-axis and z-axis, respectively. These settings include series name, line, point, and area styles.

  • Series name: The name of the series.

  • Line: The style of the line in this series.

    • Color: The color of the line.

    • Style: The type of the line. Options are Solid and Dashed.

    • Width: The width of the line.

    • Curve: If enabled, the line displays as a smooth curve. If disabled, it displays as straight line segments.

  • Point: The style of the data points on the line for this series.

    • Color: The color of the data points.

    • Radius: The radius of the data points, in pixels (px).

  • Area: The style of the area under the line for this series.

    Color: The color style for the area. Both solid and gradient fills are supported.

  • Label: The style of the data labels for this series.

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

• Animation: Click the icon to show or hide animation settings.

  • Initial animation duration: The duration of the initial animation when the widget first renders, in milliseconds (ms).

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

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

  • Animate from previous state: If enabled, animations start from the previous data state when data is updated. If disabled, animations restart from the initial state.

Data

A dual-axis chart requires a specific data format with x, y, and z fields. The y and z values represent the points for the two lines on their respective axes.

[
  {
    "x": "2010/01/01 00:00:00",
    "y": 375,
    "z": 22
  },
  {
    "x": "2010/02/01 00:00:00",
    "y": 200,
    "z": 59
  },
  {
    "x": "2010/03/01 00:00:00",
    "y": 25,
    "z": 51
  },
  {
    "x": "2010/04/01 00:00:00",
    "y": 190,
    "z": 18
  },
  {
    "x": "2010/05/01 00:00:00",
    "y": 70,
    "z": 100
  }
]

Interaction

Select Enable to activate widget interactions. Clicking a data point on the dual-axis chart triggers a data request and emits a callback value, which can be used to dynamically load data related to that point. By default, the x, y, and z values from the data are emitted. For more information, see Configure a widget callback ID.

Blueprint Editor interaction

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 Dual-axis Chart widget in the import node pane. The widget's configuration parameters appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When data request is complete	This event triggers after the data API request returns and the filter processes it. It emits the processed data in JSON format. For a data example, see the Data section.
     When a data item is clicked	This event triggers when you click a data point on the dual-axis chart. It emits the data item corresponding to that point.

   • Actions

     Actions	Description
     Request data	Triggers a new request for server-side data, passing data from upstream processing or layer nodes as a parameter. For example, if the API data source is set to http://api.test and the data passed to the Request data action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data	Processes and imports data in the required format to redraw the chart without making a new server request. For a data example, see the Data section.
     Highlight	Highlights elements corresponding to a data item. The following code provides a parameter example. { data: { x: '2010/01/01' // You can list multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Cancel highlight	Cancels the highlight on elements corresponding to a data item. The following code provides a parameter example. { data: { x: '2010/01/01' }, options: { mode: 'single' // If mode is 'single', only one highlight is canceled when multiple items match. If mode is 'multiple', all highlights are canceled. } }
     Update widget configuration	Dynamically updates the style configuration of the widget. To use this action, first get the configuration data by clicking Copy Configuration to Clipboard in the widget's Configuration panel. Then, on the Blueprint Editor page, modify the field values within a data processing node.
     Show	Shows the widget. No parameters are required.
     Hide	Hides the widget. No parameters are required.
     Toggle visibility	Toggles the visibility of the widget. { // true to show, false to hide. "status": true, // Show animation. "animationIn": { // Animation type. Set to 'fade' or leave blank for no animation. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function for the show animation. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" }, // Hide animation. "animationOut": { // Animation type. Set to 'fade' or leave blank for no animation. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function for the hide animation. 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 is 'to'. "positionType": "to", // Target position: x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Easing curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }