You can add one or more grouped column charts to a project to view the data differences 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.
  • Chart
    • 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.
    • Bar Options
      • 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 right border of the chart), enter a value or drag the slider. The value range is from 0 to 1.
      • Background Color: To change the background color of the columns, see Color picker.
    • Margin
      • Top: To adjust the spacing between the columns and the top border of the chart, enter a value, or click + or .
      • Bottom: To adjust the spacing between the columns and the bottom border of the chart, enter a value, or click + or .
      • Left: To adjust the spacing between the leftmost column and the left border of the chart, enter a value, or click + or .
      • Right: To adjust the spacing between the rightmost column and the right border of the chart, enter a value, or click + or .


    • Label: To display the labels, click the Eye icon.
      • Text Style
        • Font Size: To change the font size of the label text, enter a value, or click + or .
        • Font Color: To change the 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.
      • Vertical Offset: You can customize the vertical offset of the labels as needed.
      • Horizontal Offset: You can customize the horizontal offset of the labels as needed.


  • X Axis: To display the x-axis, click the Eye icon.
    • Text Style
      • Color: To change the font color of the text along the x-axis, see Color picker.
      • Font Size: To change the font size of the text along the x-axis, enter a value or drag the slider. The value range is from 10 to 100.
      • Font Weight: To set the font weight of the text along the x-axis, click the drop-down arrow and select the target font weight.
      • Tick Size: To change the length of the ticks along the x-axis, enter a value or drag the slider. The value range is from 0 to 40.
      • Label Distance from X Axis: To adjust the spacing between the text along the x-axis and the x-axis, enter a value or drag the slider. The value range is from –40 to 40.
      • Assist Line: If you select this option, the axis line and ticks are displayed.


  • Y Axis: To display the y-axis, click the Eye icon.
    • Text Style
      • Color: To change the font color of the text along the y-axis, see Color picker.
      • Font Size: To change the font size of the text along the y-axis, enter a value or drag the slider. The value range is from 10 to 100.
      • 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.
    • Unit: You can set the unit of the label text along the y-axis as needed.
    • Min: To set the format of the minimum value along the y-axis, click the drop-down arrow and select the target value.
      • Minimum data value
      • Automatic rounding
    • Max: To set the format of the maximum value along the y-axis, click the drop-down arrow and select the target format.
      • Maximum data value
      • Automatic rounding
    • Tick Size: To change the length of the ticks along the y-axis, enter a value or drag the slider. The value range is from 0 to 40.
    • Label Distance from Y Axis: To adjust the spacing between the text along the y-axis and the y-axis, enter a value or drag the slider. The value range is from –40 to 40.
    • Assist Line: If you select this option, the axis line and ticks are displayed.

  • Series: To add or delete a series, click + or click the Trash icon.
    • Color: To set the fill color type, click the drop-down arrow and select the target type. To change the color of a series, see Color picker.
      • 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.
    • Series to Type
      • If you select this option, the column chart is displayed in type mode. If the type mode is not displayed, check whether you have set the s field, which defines the column type. A category corresponds to a specific type.

      • If you clear this option, the column chart is displayed in series mode. If the series mode is not displayed, check whether you have set the s field, which defines the column type. For example, if you set two series, two columns are displayed for each category.

      If you select this option, the column chart is displayed in type mode.

  • 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 are displayed in sequence. If you clear this option, the animations of the columns of different series are displayed at the same time. This option takes effect only when two or more series are set.
    • 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
  • s: (optional) series data


Interaction

This widget is not connected to any events yet.