This topic describes how to configure a capsule column chart on a dashboard to display differences of series of data.

Configure the configuration plane

  • 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.
    • Bar
      • Inner Padding: To adjust the spacing between the columns, enter a value or drag the slider. The value range is from 0 to 1.
      • Outer Padding: To adjust the left space (between the leftmost column and the left border of the chart) and the right space (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.
      • Capsule Padding: To adjust the spacing between the columns and the capsule borders, enter a value, or click + or .
      • Border Color: To change the color of the capsule borders, see Color picker.
      • Border Size: To change the width of the capsule borders, enter a value, or click + or .
      • Padding Color: To change the color of the column borders, 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: Click the Eye icon to display labels on columns.
    • Text Style
      • Font Size: Set the font size of the label text by entering a value or clicking + or -.
      • Font Color: Set the color of the label text. For more information, see Configure item description.
      • Font Weight: Select a font weight for the label text from the drop-down list.
    • Position: Select a position for the label from the drop-down list.
      • Top
      • Center
      • Bottom
    • Empty Data: Select this check box to display a label for a column without data. If you do not select this check box, labels are not displayed for columns without data.
  • Maximum Data: Set the maximum data value that a label can display by entering a value or clicking + or -.

  • 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 set 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.
      • Angle: To set the angle of the axis labels, click the drop-down arrow and select the target angle.
        • Horizontal
        • Slant
        • Vertical
      • Quantity: To change the number of axis labels, enter a value, or click + or .
        Note If you set the Quantity 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 icon.
      • Color: To change the color of the axis line, see Color picker.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: To change the color of the grid lines, see Color picker.


  • Y Axis: To display the y-axis, click the Eye icon.
    • 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 icon.
      • Max: To set the display format of the maximum value along the y-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 icon.
      • 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 icon.
      • Color: To change the color of the axis line, see Color picker.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: To change the color of the grid lines, see Color picker.


  • 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 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 the space between two legends, enter a value or click + or . This parameter is available only if the chart has multiple series of data.
        • 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 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. If the series has a name, ensure that the data is displayed in the proper order. For more information, see Frequently asked questions (User self-check process).
    • 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.


  • Animation: Click the Eye icon to display animation parameters.
    • Original Duration: Set the time length (in milliseconds) for rendering an animation for the first time. To set this parameter, enter a value or click + or -.
    • Easing: Select an animation style from the drop-down list.
    • Animations of All Series In Sequence: Select this check box to set the animations of all series of data to be played in sequence. If you do not select this check box, the animations of all series of data are played at the same time.
    • Duration for Data Update: Set the time length (in milliseconds) at which the animation of the data is updated by entering a value or clicking + or -.
    • Update from Latest Status: If you select this check box, data updates start from the value of the original data. If you do not select this check box, data updates start from 0.


Configure the data plane

  • x: Set the category text of each column.
  • y: Set the actual data value of each column.
  • s: (Optional) Set series data.


Configure the interaction plane

This widget is not connected to any events yet.