This topic describes the configuration items of the Line Column Chart widget and how to use this widget. This widget consists of a column chart and a line chart. You can customize y-axis values as needed, and set data series to display differences between data categories.
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.
- Margin
- Top: The spacing between the line column chart and the top border.
- Bottom: The spacing between the line column chart and the bottom border.
- Left: The spacing between the line column chart and the left border.
- Right: The spacing between the line column chart and the right border.
- Bar
- Inner Padding: The horizontal spacing between the columns. The value range is from 0 to 1.
- Outer Padding: The spacing between the leftmost column and the y-axis, and the spacing between the rightmost column and the z-axis. The value range is from 0 to 1.
- Color: The background color of the columns.
- 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 number of axis labels.
- 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.
- Text Style
- 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.
- Min: The format of the minimum value along the y-axis.
- Minimum Data Value: If you select this option, the minimum 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.
- 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.
- Min: The format of the minimum value along the y-axis.
- 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.
- Text Style
- Z Axis: The style of the z-axis. To display the z-axis, click the Eye icon.
- Text Style
- Font Size: The font size of the text along the z-axis.
- Font Color: The font color of the text along the z-axis.
- Font Weight: The font weight of the text along the z-axis.
- Axis Label: To display the axis labels, click the Eye icon.
- Min: The format of the minimum value along the y-axis.
- Minimum Data Value: If you select this option, the minimum 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.
- 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.
- Min: The format of the minimum value along the y-axis.
- Unit: The unit of the label text along the z-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.
- Text Style
- 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
- 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: Optional. The position of the legend items.
- Margin
- Text Style
- Series: To add or delete a series, click +or click the Trash icon.
- Series: The value of a series. This value corresponds to the s field in the Data plane.
- Bar
- Series Name: The name of a series. You can set a name for the series as needed. If the value of the s field is displayed as the series name, leave the Series Name parameter unspecified.
- Color: The fill color type of a series. The available options are Solid Fill and Gradient Fill.
- Label: The style of each label on the columns.
- Font Size: The font size of the label text.
- Color: The font color of the label text.
- Font Weight: The font weight of the label text.
- Position: The position of the label text. The available options are Top, Middle, and Bottom.
- Line: The style of the line. To display the line, click the Eye icon.Notice The line is displayed only when the z field has a value.
- Series Name: The name of a series. You can set a name for the series as needed. If the value of the s field is displayed as the series name, leave the Series Name parameter unspecified.
- Color: The fill color type of a series. The available options are Solid Fill and Gradient Fill.
- Style: The line style. The available options are Solid Line and Dotted Line.
- Width: The line width.
- Curve: If you select this check box, the line is displayed as a curve.
- Point Style: The style of the points along the line. To display the point style option, click
the Eye icon.
- Radius: The radius of the points. The unit is pixels.
- Label: The labels along the line. To display the label option, click the Eye icon.
- Font Size: The font size of the label text along the line.
- Color: The font color of the label text along the line.
- Font Weight: The font weight of the label text along the line.
- Animation: The animation of the line column chart. 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 a 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 bottom of the x-axis.
Data

[
{
"x": "February",
"y": "235.5",
"z": "0"
},
{
"x": "March",
"y": "156.3",
"z": "-33.6"
},
{
"x": "April",
"y": "123.5",
"z": "-21"
},
{
"x": "May",
"y": "423.5",
"z": "42.9"
},
{
"x": "June",
"y": "456.5",
"z": "7.8"
},
{
"x": "July",
"y": "356.5",
"z": "-21.9"
},
{
"x": "August",
"y": "456.5",
"z": "28.1"
},
{
"x": "September",
"y": "853.5",
"z": "87"
}
]
- x: The category text of each column.
- y: The actual data value of each column.
- z: The actual data value along the line.
- s: Optional. The series value.
Interaction
This widget is not connected to any events yet.