Area chart (versions earlier than v4.0)

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 settings

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

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

  • Empty data: If enabled, the line connects to points where the y-axis value is 0.

    Figure 1. Empty data enabled

    Figure 2. Empty data disabled

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

• Title

  • Title name: The title of the chart.

  • Text style: The text style of the title.

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

    • Font color: The color of the title text.

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

• Ticker board: A ticker board is a widget that shows dynamic changes in numeric data. It typically consists of a prefix, numbers, and a suffix.

  Horizontal alignment: The horizontal position of the ticker board relative to the widget's initial coordinates. Options: right alignment, left alignment, center alignment.

  • Prefix: The style of the prefix in the ticker board.

    • Content: The content of the prefix.

    • Text style

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

      • Font color: The color of the prefix text. For more information, see Color picker configurations.

      • Font size: The font size of the prefix text. The value must be between 0 and 100.

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

  • Numbers: The style of the numbers in the ticker board.

    • By default, the number displays the y-coordinate value for the last x-axis coordinate in the data. Therefore, you can change the default value by configuring the data.

    • If you need to display the sum or average of the data, you can set the color of this section to transparent. Then, place a ticker board widget in an appropriate position on the area chart widget and configure its style and data.

    • Text style

      • Font color: The color of the numbers.

      • Font size: The font size of the numbers. The value must be between 0 and 100.

      • Font weight: The font weight of the numbers.

    • Number spacing: The spacing between digits. The value must be between 0 and 10.

    • Background color: The background color of the number area.

    • Default digits: The default number of digits. The value must be between 0 and 100.

    • Data rounding: If selected, decimal values are rounded to the nearest integer. If cleared, decimal values are displayed, and you can configure the number of decimal places.

    • Thousands separator: If selected, a separator is used for numbers with five or more digits.

    • Thousands separator symbol: The symbol used as the thousands separator. This option is available only when Thousands separator is enabled. You cannot use a number as a separator.

    • Decimal symbol: The symbol used as the decimal separator. This option is available only when Data rounding is disabled and the number of decimal places is greater than 0. You cannot use a number as a separator.

  • Suffix: The style of the suffix in the ticker board.

    • Content: The content of the suffix.

    • Text style

      • Font color: The color of the suffix text.

      • Font size: The font size of the suffix text. The value must be between 0 and 100.

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

• X-axis: The style of the chart's 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. The value must be between 10 and 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 data format and the specified format settings causes display errors.

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

      • Numeric: Supports numeric data such as integers and floating-point numbers.

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

      • Time: Time-based data, which requires data format configuration.

    • Data format: The format of the source data. This setting is valid only for the time data type. Configure the format based on the %Y/%m/%d %H:%M:%S standard.

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

    • Margin: If enabled, blank space is added at both ends of the x-axis.

    • Margin size: The size of the blank space. The value must be between 0 and 1. This option is available only when Margin is enabled.

    • Maximum: The maximum value on the x-axis. You can enter a custom value. Default: auto. If set to auto, the system calculates an appropriate value based on the data range and label count.

    • Minimum: The minimum value on the x-axis. You can enter a custom value. Default: auto. If set to auto, the system calculates an appropriate value based on the data range and label count.

    • Offset: The vertical offset of the x-axis value labels.

    • Unit: The unit for the x-axis.

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

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

    • Axis line: The color and visibility settings for the axis line.

    • Grid lines: The color and visibility settings for the grid lines.

• Y-axis

  The configuration is similar to that of the x-axis. See the x-axis section for details.

• Legend: The style of the chart's 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: The arrangement of legend items.

    • Spacing

      • Horizontal spacing: The horizontal distance between adjacent legend items. This option is available only when there are multiple series.

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

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

• Tooltip: Configures the tooltip that appears when you hover over or click a data point.

  Figure 3. Tooltip style

  Figure 4. Tooltip example

  • Trigger type: The target 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 box 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.

    • Padding: The padding of the tooltip, in pixels.

    • Horizontal offset: The horizontal offset of the tooltip relative to the mouse pointer, in pixels.

    • Vertical offset: The vertical offset of the tooltip relative to the mouse pointer, in pixels.

    • Border color: The border color of the tooltip.

    • Border width: The border width of the tooltip, in pixels.

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

    • 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: The style of the axis pointer that is displayed when the tooltip is triggered on an axis.

    • Type: The type of the axis pointer. Currently, only Line pointer is supported.

    • Line style: The color, width, and type of the pointer line. The line type can be solid, dashed, or dotted.

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

  • Series name: The name of the data series. You can customize the name. If this field is empty, the system uses the value of the s field from the widget's data as the series name. If this field is not empty, you must ensure that the data order matches the configured series order.

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

    • Color: The color of the line.

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

    • Width: The width of the line.

    • Curve: If selected, the line renders as a curve. If cleared, it renders as straight line segments.

      Figure 5. Curve disabled

      Figure 6. Curve enabled

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

    • Color: The color of the points.

    • Radius: The radius of the points, in pixels.

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

    Color: The color of the area.

  • Label: The style of the labels on the line 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.

• Data configuration

  • Incremental data: Ideal for dynamic data streams, such as an electrocardiogram. When enabled, you can specify the maximum number of data points to display and how they transition as new data arrives.

  • Maximum capacity: The maximum number of data entries to display on the chart.

• Animation: The animation style of the chart. 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. The system provides a variety of common easing effects for you to choose from.

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

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

Data

[
  {
    "x": "2010/01/01 00:00:00",
    "y": 375
  },
  {
    "x": "2010/02/01 00:00:00",
    "y": 200
  },
  {
    "x": "2010/03/01 00:00:00",
    "y": 0
  },
  {
    "x": "2010/04/01 00:00:00",
    "y": 190
  },
  {
    "x": "2010/05/01 00:00:00",
    "y": 90
  },
  {
    "x": "2010/06/01 00:00:00",
    "y": 233
  }
]

Interaction

Select Enable to turn on the widget's interaction features. When you click a point in the area chart, it triggers a data request and passes a callback value to dynamically load data for different points. By default, the x, y, and s values from the data are passed. For specific configurations, see Configure a callback ID for a widget.

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 Area Chart widget in the import node list. The configuration parameters for the area chart in the Blueprint Editor are shown on the canvas.

   • Events

     Event	Description
     When the area chart API request is complete	This event triggers after the system receives the data API response and processes it with a data filter. The event passes the processed data in JSON format. For an example of the data structure, see the Data section.
     When a data item is clicked	This event is triggered when a point on the area chart is clicked. The data item corresponding to that point is passed.

   • Actions

     Actions	Description
     Request area chart API	Rerequests data from the server API, using data from upstream data processing nodes or layer nodes as parameters. For example, if the area chart's API data source is http://api.test and the data passed to the Request area chart API action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data to area chart	Processes data according to the widget's rendering format, imports the data, and redraws the widget. This action does not resend a request to the server. For an example of the data structure, see the Data section.
     Highlight	Highlights the element corresponding to a data item. The following code shows an example of the parameters. { data: { x: 'Shanghai' // You can list multiple conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Cancel highlight	Cancels the highlight on the element corresponding to a data item. The following code shows an example of the parameters. { data: { x: 'Shanghai' }, options: { mode: 'single' // 'single': cancels one highlight if multiple items match. 'multiple': cancels all highlights if multiple items match. } }
     Update widget configuration	Dynamically updates the style configuration of the widget. First, in the widget's Configuration panel, click Copy Configuration to Clipboard to copy the widget's configuration data. Then, use a data processing node on the Blueprint Editor page to modify the required style fields.
     Show	Shows the widget. No parameters are required.
     Hide	Hides the widget. No parameters are required.
     Toggle visibility	Toggles the visibility of the widget between shown and hidden.
     Move	Moves the widget to a specified position. { // Move type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // Target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation easing function. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }