Setting Properties of the Line Chart Widget

Updated on 2025-03-24 GMT+08:00

View PDF

This widget is used to collect statistics on the line chart.

Figure 1 Setting basic line chart properties

Basic

Widget Label: Label of a widget, which is displayed on the advanced page.
Widget Name: Name of a widget, which is the unique identifier of the widget on the page.

Position

Left: Left margin of the widget in the canvas. Unit: px.
Top: Top margin of the widget in the canvas. Unit: px.
Layout Width: Width of the widget. Unit: px.
Layout Height: Height of the widget. Unit: px.
Stacking Order: Order of the widget among others. The default value is 1. The widget with the largest value is on the top. If you want to move a widget to the bottom of a stack, set the parameter to 0.
Auto Height: whether the widget height changes with the width.
open: If this option is selected, the page adaptation function is displayed in the lower part.
Page Adapter: Select open to enable height adaptation for the widget. This property enables the position of other widgets below the page to be automatically adjusted based on the height of the widget. One page supports only one widget.

Border

Border of the widget. Options: Full and Corner.

Full border
- Style: Style of the widget border. Options: Solid, Dotted, Dashed, and Double.
- Width: Border width, in pixels.
- Color: color of the widget border.
- Radius: radian of the four corners of the widget border, in pixels.
Corner
- Width: Border width, in pixels.
- Length: Border length, in pixels.
- Color: color of the widget border.
- Radius: radian of the four corners of the widget border, in pixels.
- Padding: Spacing between the widget border and the chart, in pixels.

Background

Style: Background style. Options: Normal, Center, and Stretch.
Image URL: Add images for this widget. The image can be in JPG, JPEG, PNG, or GIF format, and the image size cannot exceed 50 MB. The suggested image size is 800 x 800.
Color: Background color of the widget.

Advanced Settings

Right-click the basic line chart widget and choose Setting from the shortcut menu to configure the line chart.

Reference Color Template: The system provides three basic line chart templates. You can click a template to switch the style. You can select a template to reset or set configuration items to obtain the desired effect.
Data Series: You can configure each data series, including the line color, line width, line transparency, inflection point color, area color, maximum and minimum values, and average value. For details about how to configure the data series, see Configuring a Data Series. Click + to add a data series.
- Line Color: Select Monochrome or Gradient to change the color of the line.
- Polyline Width: Width of polylines.
- Polyline Opacity: Opacity of a polyline. 0 indicates completely transparent. 100 indicates that all polylines are displayed.
- Polyline Smooth Display: Whether the polylines are displayed smoothly.
- Inflection Point Color: Color of kink points on polylines.
- Inflection Point Size: Size of kink points on polylines.
- Inflection Point Opacity: Opacity of kink points on polylines. 0 indicates completely transparent. 100 indicates that all knee points are displayed.
- Area Color: Color of the area in a specific data series.
- Data Display: Whether to display values next to the polyline. If this function is enabled, the value color can be displayed.
- Max: Whether to display the maximum value of the data series.
- Min: Whether to display the minimum value of the data series.
- Average: Whether to display the average value of the data series.
X Axis: X axis configuration.
- xAxis Label: You can set the text content, text color, font size, and spacing between the title and axis.
- Axis Setting: Whether to display the axis, whether to display the scale, axis color, and axis text color.
- Gridlines: Whether to display the axis grid lines, and their type and color.
- Extra-column Spacing: Whether to display the spacing outside the bar.
- Label Display: Whether to wrap too many characters and whether to omit too many characters. The value of the X-axis label comes from the value of the dataX field in the data model.
- Tick label Interval: Whether to display scale labels at intervals. If this function is disabled, all labels are displayed.
- Tick label Rotation Angle: Rotation angle of the scale label.
Y Axis: Y axis configuration.
- yAxis Label: You can set the text content, text color, font size, and spacing between the title and axis.
- Minimum Interval Of Coordinate Axis: For example, if the interval is 500, the Y axis is 0, 500, 1000, and 1500, which are separated by 500 in sequence.
- Axis Setting: Whether to display the axis, whether to display the scale, axis color, and axis text color.
- Column shadow: whether to display the column shadow, shadow color, and whether to display data.
- Gridlines: Whether to display the axis grid lines, and their type and color.
- threshold line setting: Once enabled, you can set the number of thresholds and thresholds.
Title: Set the widget title, including the text content, text position, background color, text color, and font size.
Legend: Set the legend, including the small legend icon, left margin, and top margin. The legend text content comes from the value of title in the dataValue data model.
Common Setting > Total Display: After this function is enabled, the total data volume is displayed.
Background: Set the background color and round corners of the chart. 0 indicates right angle, and 100 indicates round corner.