You can add one or more line column charts to a project to view differences between the series more clearly.

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
      • Top: To adjust the spacing between the column chart and the top border, enter a value, or click + or –.
      • Bottom: To adjust the spacing between the column chart and the bottom border, enter a value, or click + or –.
      • Left: To adjust the spacing between the column chart and the left border, enter a value, or click + or –.
      • Right: To adjust the spacing between the column chart and the right border, enter a value, or click + or –.
    • Bar
      • Inner Padding: To adjust the horizontal spacing between the columns, enter a value or drag the slider. The value range is from 0 to 1.
      • Outer Padding: To adjust spacing 1 (spacing between the leftmost column and the y-axis) and spacing 2 (spacing between the rightmost column and the z-axis), enter a value or drag the slider. The value range is from 0 to 1.
      • Color: To change the background color of the columns, see Color picker.


  • X Axis: To display the x-axis, click the Eye button.
    • 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 button.
      • Angle
        • Horizontal
        • Slant
        • Vertical
      • Quantity: To change the number of axis labels, enter a value, or click + or –.
        Note If you set this field to 0, the axis labels are automatically displayed according to the data and the number of the columns.
    • Axis Line: To display the axis line, click the Eye button.
      • Color: To change the color of the axis line, see Color picker.
    • Grid Lines: To display the grid lines, click the Eye button.
      • Color: To change the color of the grid lines, see Color picker.


  • Y Axis: To display the y-axis, click the Eye button.
    • Text Style
      • Font Size: To change the font size of the text along the y-axis, enter a value, or click + or –.
      • Font Color: To change the font color of the text along the y-axis, see Color picker.
      • Font Weight: To set the font weight of the text along the y-axis, click the drop-down arrow and select the target font weight.
    • Axis Label: To display the axis labels, click the Eye button.
      • Min: To set the display format of the minimum value along the y-axis, click the drop-down arrow and select the target format.
        • Minimum data value
        • Automatic rounding
      • Max: To set the display format of the maximum value along the y-axis, click the drop-down arrow and select the target format.
        Note The value auto indicates automatic rounding.
        • Maximum data value
        • Automatic rounding
      • Quantity: To change the number of axis labels, enter a value, or click + or –.
      • Display Format: To set the display format of the axis labels, click the drop-down arrow and select the target format.
    • Unit: To display the unit option, click the Eye button.
      • Unit: You can set the unit of the label text along the y-axis as needed.
    • Axis Line: To display the axis line, click the Eye button.
      • Color: To change the color of the axis line, see Color picker.
    • Grid Lines: To display the grid lines, click the Eye button.
      • Color: To change the color of the grid lines, see Color picker.


  • Z Axis: To display the z-axis, click the Eye button.
    • Text Style
      • Font Size: To change the font size of the text along the z-axis, enter a value, or click + or –.
      • Font Color: To change the font color of the text along the z-axis, see Color picker.
      • Font Weight: To set the font weight of the text along the z-axis, click the drop-down arrow and select the target font weight.
    • Axis Label: To display the axis labels, click the Eye button.
      • Min: To set the display format of the minimum value along the z-axis, click the drop-down arrow and select the target format.
        • Minimum data value
        • Automatic rounding
      • Max: To set the display format of the maximum value along the z-axis, click the drop-down arrow and select the target format.
        • Maximum data value
        • Automatic rounding
      • Quantity: To change the number of axis labels, enter a value, or click + or –.
      • Display Format: To set the display format of the axis labels, click the drop-down arrow and select the target format.
    • Unit: To display the unit option, click the Eye button.
      • Unit: You can set the unit of the label text along the z-axis as needed.
    • Axis Line: To display the axis line, click the Eye button.
      • Color: To change the color of the axis line, see Color picker.
    • Grid Lines: To display the grid lines, click the Eye button.
      • Color: To change the color of the grid lines, see Color picker.


  • Legend: To display the legend items, click the Eye button.
    • 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 set the font weight of the legend text, click the drop-down arrow and select the target font weight.
    • Layout
      • Margin
        • Horizontal Interval: 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 –.
        • Vertical Interval: 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 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: You can set a value for this series as needed. This value corresponds to the s field in the Data pane.
    • Bar
      • Series Name: You can set a name for the series as needed. If the series does not have a name, the value of s is automatically displayed as the series name.
      • Color: To set the fill color type, click the drop-down arrow and select the target type.
        • Solid fill: To change the color of a series, see Color picker.
        • Gradient fill
          • You can select two colors as the gradient colors. For more information, see Color picker.
          • To change the gradient angle, enter a value or drag the slider. The value range is from 0 to 360.
      • Label
        • Font Size: To change the font size of the column label text, enter a value, or click + or –.
        • Color: To change the font color of the column label text, see Color picker.
        • Font Weight: To set the font weight of the column label text, click the drop-down arrow and select the target font weight.
        • Position: To set the position of the column label text, click the drop-down arrow and select the target position.
          • Top
          • Middle
          • Bottom


    • Line
      Notice The line is displayed only when the z field has a value.
      • Series Name: You can set the series name of the line as needed. If the series does not have a name, the value of s is automatically displayed as the series name.
      • Color: To set the fill color type, click the drop-down arrow and select the target type. You can change the color of the line as needed. For more information, see Color picker.
        • Solid fill
        • Gradient fill
      • Style: To change 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.
      • Point Style
        • Radius: To change the radius of the points, enter a value, or click + or –.
      • Label
        • Font Size: To change the font size of the label text along the line, enter a value, or click + or –.
        • Color: To change the font color of the label text along the line, see Color picker.
        • Font Weight: To set the font weight of the label text along the line, click the drop-down arrow and select the target font weight.


  • 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.
    • Animations of All Series in Sequence: If you select this option, the animations of the columns of different series in the chart are displayed in sequence. If you clear this option, the animations of the columns of different series in the chart are displayed at the same time.
    • 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 column where the data has changed. If you clear this option, the animation begins from the starting point.


Data

  • x: category text of each column
  • y: actual data value of each column
  • z: actual data value along the line
  • s: (optional) series value


Interaction

This widget is not connected to any events yet.