This topic describes the configuration items of the Capsule Column Chart widget and how to use this widget. You can customize data along the y-axis to display data differences.

Settings

  • Basic Attributes
    • Size: The width and height of the widget. The unit is pixels.
    • Position: The position of the widget. You can set the widget position by adjusting its x-axis and y-axis. The unit is pixels.
    • Others: The rotation angle and opacity of the widget.
  • Global Settings
    • Font Family: The font of the displayed text. The default font is Microsoft YaHei.
    • Bar
      • Inner Padding: The spacing between the columns. The value range is from 0 to 1.
      • Outer Padding: The spacing between the leftmost column and the left border, and the spacing between the rightmost column and the right border of the chart. The value range is from 0 to 1.
      • Capsule Padding: The spacing between the columns and the capsule borders.
      • Border Color: The color of the capsule borders. For information about how to set a color, see Color picker.
      • Border Size: The width of the capsule borders.
      • Padding Color: The color of the column borders.
    • Margin
      • Top: The spacing between the columns and the top border of the chart.
      • Bottom: The spacing between the columns and the bottom border of the chart.
      • Left: The spacing between the leftmost column and the left border of the chart.
      • Right: The spacing between the rightmost column and the right border of the chart.
  • Label: The labels on the columns. To display the labels, click the Eye icon.
    • Text Style
      • Font Size: The font size of the label text.
      • Font Color: The font color of the label text.
      • Font Weight: The font weight of the label text.
    • Position: The position of the labels. The available options are Top, Center, and Bottom.
    • Empty Data: If you select this check box, 0 is displayed when the x-axis has no data.
  • X Axis: The style of the x-axis. To display the x-axis, click the Eye icon.
    • Text Style
      • Font Size: The font size of the text along the x-axis.
      • Font Color: The font color of the text along the x-axis.
      • Font Weight: The font weight of the text along the x-axis.
    • Axis Label: To display the axis labels, click the Eye icon.
      • Angle: The angle of the axis labels. The available options are Horizontal, Slant, and Vertical.
      • Quantity: The maximum number of axis labels.
        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: The color of the axis line.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: The color of the grid lines.
  • Y Axis: The style of the y-axis. To display the y-axis, click the Eye icon.
    • Text Style
      • Font Size: The font size of the text along the y-axis.
      • Font Color: The font color of the text along the y-axis.
      • Font Weight: The font weight of the text along the y-axis.
    • Axis Label: To display the axis labels, click the Eye icon.
      • Max: The format of the maximum value along the y-axis.
        • Maximum Data Value: If you select this option, the maximum value is used.
        • Automatic Rounding: If you select this option, the system calculates the value according to the maximum value, minimum value, and number of axis labels.
      • Quantity: The number of axis labels.
      • Display Format: The display format of the axis labels. You can customize the display format or select a format as needed. If you select Auto, the default format is displayed.
    • Unit: The unit of the label text along the y-axis. To display the unit option, click the Eye icon.
    • Axis Line: To display the axis line, click the Eye icon.
      • Color: The color of the axis line.
    • Grid Lines: To display the grid lines, click the Eye icon.
      • Color: The color of the grid lines.
  • Legend: To display the legend items, click the Eye icon.
    • Text Style
      • Font Size: The font size of the legend text.
      • Font Color: The font color of the legend text.
      • Font Weight: The font weight of the legend text.
    • Layout: The layout of the legend items.
      • Margin
        • Horizontal Interval: The horizontal spacing between two legend items. This parameter is available only if the chart has multiple series of data.
        • Vertical Interval: The spacing between the legend items and the top border of the chart, and the spacing between the legend items and the bottom border of the chart.
      • Position: The position of the legend items.
  • Series: To add or delete a series, click + or click the Trash icon.
    • Series Name: The name of a series. 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, make sure that the data is displayed in the correct order. For more information, see Frequently asked questions (User self-check process).
    • Color: The fill color type of a series. The available options are Solid Fill and Gradient Fill.
  • Animation: The animation of the columns. To display the animation option, click the Eye icon.
    • Original Duration: The period of time needed for the first time the widget renders the animation. The unit is milliseconds.
    • Easing: The animation easing. You can select an easing effect as needed.
    • Animations of All Series In Sequence: If you select this check box, the animations of all columns in the chart are displayed in sequence. If you clear this check box, the animations of all columns in the chart are displayed at the same time.
    • Duration for Data Update: The period of time needed for the widget to render the animation after data is updated. The unit is milliseconds.
    • Update from Latest Status: If you select this check box, the animation begins from the column where the data is updated. If you clear this check box, the animation begins from the starting point.

Data

The JSON example in the preceding figure is as follows:
[
  {
    "x": "Inner Mongolia",
    "y": "375",
    "s": "1"
  },
  {
    "x": "Inner Mongolia",
    "y": "180",
    "s": "2"
  },
  {
    "x": "Inner Mongolia",
    "y": "200",
    "s": "3"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "1"
  },
  {
    "x": "Zhejiang",
    "y": "100",
    "s": "2"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "3"
  },
  {
    "x": "Liaoning",
    "y": "25",
    "s": "1"
  },
  {
    "x": "Liaoning",
    "y": "125",
    "s": "2"
  },
  {
    "x": "Liaoning",
    "y": "100",
    "s": "3"
  },
  {
    "x": "Jilin",
    "y": "190",
    "s": "1"
  },
  {
    "x": "Jilin",
    "y": "110",
    "s": "2"
  },
  {
    "x": "Jilin",
    "y": "170",
    "s": "3"
  },
  {
    "x": "Heilongjiang",
    "y": "90",
    "s": "1"
  },
  {
    "x": "Heilongjiang",
    "y": "60",
    "s": "2"
  },
  {
    "x": "Heilongjiang",
    "y": "70",
    "s": "3"
  },
  {
    "x": "Anhui",
    "y": "240",
    "s": "1"
  },
  {
    "x": "Anhui",
    "y": "170",
    "s": "2"
  },
  {
    "x": "Anhui",
    "y": "280",
    "s": "3"
  },
  {
    "x": "Fujian",
    "y": "420",
    "s": "1"
  },
  {
    "x": "Fujian",
    "y": "190",
    "s": "2"
  },
  {
    "x": "Fujian",
    "y": "390",
    "s": "3"
  }
]
  • x: The category text of each column.
  • y: The actual data value of each column.
  • s: Optional. The series data.

Interaction

This widget is not connected to any events yet.