The area chart widget allows you to customize the chart style, the display of different series data, and other options as ne eded.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • Global Settings
    • Font Family: To set the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • Margin: Spacing between the chart and the chart borders. The unit is pixels.
    • Empty Data: If you select this option, the line and the x-axis intersect at the point where the value corresponding to the y-axis is 0. If you clear this option, the line and the x-axis do not intersect at the point where the value corresponding to the y-axis is 0.


  • Title
    • Title Name: You can set a name for the chart as needed.
    • Text Style: You can set the text style of the title as needed.
      • Font Size: To change the font size of the title text, enter a value, or click + or .
      • Font Color: To change the font color of the title text, see Color picker.
      • Font Weight: To change the font weight of the title text, click the drop-down arrow and select the target font weight.


  • Ticker Board
    • Horizontal Alignment: To set the position of the ticker board, click the drop-down arrow and select the target position.
      • Align right
      • Align left
      • Center alignment


    • Prefix
      • Content: You can customize the prefix as needed.
      • Text Style
        • Font Color: To change the font color of the prefix, see Color picker.
        • Font Size: To change the font size of the prefix, enter a value or drag the slider. The value range is from 0 to 100.
        • Font Weight: To change the font weight of the prefix, click the drop-down arrow and select the target font weight.


    • Numbers
      Note By default, the maximum data value is displayed.
      • Text Style
        • Font Color: To change the font color of the data value, see Color picker.
        • Font Size: To change the font size of the data value, enter a value or drag the slider. The value range is from 0 to 100.
        • Font Weight: To change the font weight of the data value, click the drop-down arrow and select the target font weight.
      • Spacing of Numbers: To adjust the spacing between the numbers contained in the data value, enter a value or drag the slider. The value range is from 0 to 1.

      • Background Color: To change the background color of the data value, see Color picker.
      • Default Digits: To change the number of digits, enter a value or drag the slider. The value range is from 0 to 100.
      • Rounding: If you select this option, the data value is automatically rounded. If you clear this option, the data value is not rounded.
      • Thousands Separator: If you select this option, a thousands separator is inserted. If you clear this option, no thousands separator is inserted.
      • Thousands Separator Symbol: You can customize the thousands separator symbol as needed.
      • Decimal Symbol: You can customize the decimal symbol as needed.
        Note Only one character is allowed. If more than one character is entered, the first character will be used. Numbers cannot be used as separators.


    • Suffix
      • Content: You can customize the suffix as needed.
      • Text Style
        • Font Color: To change the font color of the suffix, see Color picker.
        • Font Size: To change the font size of the suffix, enter a value or drag the slider. The value range is from 0 to 100.
        • Font Weight: To change the font weight of the suffix, click the drop-down arrow and select the target font weight.


  • X Axis: To display the x-axis, click the Eye icon.
    • Text Style
      • Font Size: To change the font size of the text along the x-axis, enter a value, or click + or .
      • Font Color: To change the font color of the text along the x-axis, see Color picker.
      • Font Weight: To change the font weight of the text along the x-axis, click the drop-down arrow and select the target font weight.


    • Axis Label: To display the axis labels, click the Eye icon.
      Note An error will be displayed if the data format differs from the data format set for the x field in the data pane.
      • Category Type: To set the type of data along the x-axis, click the drop-down arrow and select the target type.
        • Numeric
        • Category
        • Time
      • Data Format: To set the original format of the data, click the drop-down arrow and select the target format.
        Note The following is an example: %Y/%m/%d%H:%M:%S.
      • Display Format: To set the display format of the data, click the drop-down arrow and select the target format.
        Note Time format: %m/%d%Y%H:%M:%S; integer format: d; floating-point number: .1f.


      • Margin: If you select this option, spacing 1 (spacing between the chart and the y-axis) and spacing 2 (spacing between the chart and the right border of the chart) are displayed. If you clear this option, spacing 1 and spacing 2 are not displayed.
      • Margin Size: To adjust spacing 1 and spacing 2, enter a value or drag the slider. The value range is from 0 to 1.

      • Min/Max: You can customize the minimum and maximum values along the x-axis as needed.
      • Offset: To adjust the spacing between the labels along the x-axis, enter a value, or click + or .
      • Unit: You can customize the unit of the text along the x-axis as needed.
      • Quantity: To change the number of labels along the x-axis, enter a value, or click + or .
      • Angle: To set the angle of the labels along the x-axis, click the drop-down arrow and select the target angle. The options include horizontal, slant, and vertical.

      • Axis Line: To display the axis line, click the Eye icon. To change the color of the axis line, see Color picker.

      • Grid Lines: To display the grid lines, click the Eye icon. To change the color of the grid lines, see Color picker.

  • Y Axis

    For more information about how to set the y-axis, see X Axis.

  • Legend: To display the legend items, click the Eye icon.
    • Text Style
      • Font Size: To change the font size of the legend text, enter a value, or click + or .
      • Font Color: To change the font color of the legend text, see Color picker.
      • Font Weight: To change the font weight of the legend text, click the drop-down arrow and select the target font weight.
    • Layout
      • Margin
        • Horizontal Spacing: To adjust spacing 1 (spacing between the legend items and the right border of the chart) and spacing 2 (spacing between the legend items and the left border of the chart), enter a value, or click + or . The setting takes effect only when two or more legend items are available.
        • Vertical Spacing: To adjust spacing 1 (spacing between the legend items and the top border of the chart) and spacing 2 (spacing between the legend items and the bottom border of the chart), enter a value, or click + or .
      • Position: To set the position of the legend item or legend items, click the drop-down arrow and select the target position.
        • Top center
        • Top left
        • Top right
        • Bottom center
        • Bottom left
        • Bottom right


  • Series: To add or delete a series, click + or click the Trash icon.
    • Series Name: You can set a name for the series as needed. If the series does not have a name, the value of the s field is displayed as the series name. If the s field does not exist, the value null is used.
    • Line
      • Color: To change the line color, see Color picker.
      • Style: To set the line style, click the drop-down arrow and select the target style.
        • Solid line
        • Dotted line
      • Width: To change the line width, enter a value, or click + or .
      • Curve: If you select this option, the line is displayed as a curve. If you clear this option, the line is displayed as a straight line.


    • Point Style: To display the point style, click the Eye icon.
      • Color: To change the point color of a line, see Color picker.
      • Radius: To change the point radius, enter a value, enter a value, or click + or .


    • Area: To display the area option, click the Eye icon.
      • Color: To set the fill color type, click the drop-down arrow and select the target type.
        • Solid fill
        • Gradient fill
          • You can select two colors as the gradient colors.
          • To change the gradient angle, enter a value or drag the slider. The value range is from 0 to 360.


    • Label: To display the labels, click the Eye icon.
      • Font Size: To change the font size of the label text, enter a value, or click + or .
      • Color: To change the point color of the label text, see Color picker.
      • Font Weight: To change the font weight of the label text, click the drop-down arrow and select the target font weight.


  • Data Options
    • Incremental Data: If you select this option, the chart is displayed as a line chart similar to the display of a cardiogram. You can customize the data volume and data changes to be displayed as needed.
    • Maximum Capacity: To change the maximum data volume, enter a value, or click + or .

  • Animation: To display the animation option, click the Eye icon.
    • Original Duration: To change the duration to which the widget renders the animation for the first time, enter a value, or click + or . The unit is milliseconds.
    • Easing: To set animation easing, click the drop-down arrow and select the target effect.
    • Duration for Data Update: To change the animation duration when data changes, enter a value, or click + or . The unit is milliseconds.
    • Update from Latest Status: If you select this option, the animation begins from the point where the data has changed. If you clear this option, the animation begins from the starting point.


Data

  • x: data along the x-axis. The value of this field must be in the same format as the label text along the x-axis.
  • y: data along the y-axis
  • s: (optional) series value. If the Series Name field in Series does not have a value, the value of the s field is displayed as the series name.

Interaction

This widget is not connected to any events yet.