Setting Properties of the Radar Chart Widget

The radar chart displays data in different dimensions using polar coordinates in an enclosed area.

Figure 1 Setting properties
Click to enlarge

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 widget and choose Setting from the shortcut menu to configure the chart.

Select Template: Click the preset radar chart template to switch the style. You can select a template to reset or set configuration items to obtain the desired effect.
Data Series: A series of configurations of data attributes (such as the data mark graph and mark size). Click + to add a data series. If the number of configured data series is greater than the actual number, the extra data series are not displayed.
- Marker Style/Tagged Graphic: You can set the shape of a marker.
- Marker Style/Marker Size: You can set the size of the marker.
- Marker Style/Polyline Inflection Point Logo Color: Color of the key point mark of a polyline.
- Polyline Style/Width: Width of polylines.
- Polyline Style/Type Of Line: Type of a line.
- Polyline Style/Opacity: Transparency of a polyline.
- Polyline Style/Color: Color of the line.
- Area Fill Style/Opacity: Transparency of the area in the polyline.
- Area Fill Style/Color: Color of the area in the polyline.
- Text Labels On Graphics: Enable Show Label to set the font size, font color, and font weight of the text label on the chart.
Coordinate System: Set the coordinate system of the widget, including the radar radius, center position, indicator configuration, and dividing line. The key parameters are described as follows:
- Basic Information/Radius(%): Percentage of the radius of the radar chart to half of the widget height.
- Basic Information/Panel Center Position/X-axis(%) and Y-axis(%): Percentage of the distance from the center of the circle to the left of the widget to the widget height and percentage of the distance from the center of the circle to the top of the widget to the widget height.
- Basic Information/Drawing Type: Drawing type of the radar chart. Circle and Polygon are supported.
- Indicator: Click + to add an indicator. You can set the name, maximum value, minimum value, and color of the indicator.
- Indicator Name: If you enable Show Name, you can set the color, text style, font size, font series, and font weight of all indicator names in a unified manner. In addition, you can set the distance between the indicator name and the indicator axis.
- Number Of Axis Divisions: Number of segments on the axis, that is, the number of circles.
- Dividing Line: You can configure the colors of the ring borders. The ring borders will be colored in your specified sequence and loop.
- Partition Area. You can enable Show Split Area and configure the fill colors of the rings. The rings will be colored in your specified sequence and loop.
- Coordinate Axis: If you enable Display Axis, you can set the color of the axis.
Legend: Set the legend in the widget. The legend text comes from the value of name in the dataValue data model.
- Legend Selection Mode: How many data series will be shown in the chart. The value can be Single or Multiple.
- Location Selection: Position of the legend.
- Legend Interval: Space between the legend markers.
- Small Icon: Shape of the small icon of the legend.
- Text Style Setting/Text Font Size : Font size of the legend text.
- Text Style Setting/Text Color: Color of the legend text.
- Text Style Setting/Font Family: Font of the legend text.
- Text Style Setting/Font Weight: Font width of the legend text.
- Text Style Setting/Text Style: Style of the legend text.
Widget Title: Widget title.
- Title Setting: Whether to display the widget title.
- Content: Content of the widget title.
- Location Selection: Position of the widget title.
- Background Color: Background color of the title.
- Text Font Size: Font size of the widget title.
- Font Family: Font series of the widget title.
- Text Color: Text color of the widget title.
Chart Information: Set the background color and round corners of the chart. 0 indicates right angle, and 100 indicates round corner.