edit-icon download-icon

Basic widgets

Last Updated: Aug 10, 2018

When you select a widget on the canvas, the Style and Data tabs appear on right side of the canvas.

The following example uses a line chart.

ScreenStyle

Global settings

You can adjust basic style settings in Global Settings.

Font family

From the drop-down list, click the arrow (outlined in red) to show more options and choose a font family.

ScreenFont

Margin

To adjust the chart margins, click the plus (+) or minus (-) sign, or enter a number to view the customized chart margins.

FigureLocation

Empty data

Deselect this check box to hide empty data in the chart.

X axis and Y axis

You can set text style, axis label, axis line, and grid lines for the current widget in the X Axis or Y Axis menu separately.

Deselect the X or Y Axis check box to hide X Axis or Y Axis data of a widget.

hideXData

Text style

EditText

  • Font size: Click the plus (+) or minus (-) sign to adjust the font size.

  • Font color: Click the color block icon to select the font color from the color palette. You can also adjust the font transparency in the color palette.

    Click the up and down arrows to switch between color modes. Available color modes are HSLA, RGBA, and HEX.

EditColorMode

Axis label

Deselect the Axis Label check box to hide the X Axis or Y Axis label.

EditXTag

  • Data type: Click the drop-down arrow and select a data type, such as numeric, category, and time types.

  • Data format: You can select the data format from the drop-down menu according to the data type.

  • Display format: Click the drop-down arrow and select a data display format.

  • Max/Min: The system automatically corresponds to the maximum and minimum values according to the data type selected.

  • Unit: You can enter a data unit such as year, month, day, and hour.

  • Quantity: Click the plus (+) or minus (-) sign to adjust the amount of data to be displayed on the X axis.

  • Angle: Click the drop-down arrow to show more options and select a data display style on the X axis, such as horizontal, diagonal, and vertical.

Axis line

Deselect the Axis Line check box to hide axis lines of the X Axis or Y Axis.

EditXLine

Click the color block icon to select the axis color from the color palette.

Grid lines

Deselect the Grid Lines check box to hide grid lines of the X Axis or Y Axis.

undefined

Click the color block icon to select the grid line color from the color palette.

Axis Unit

Deselect the Unit check box to hide the X Axis or Y Axis unit.

EditYUnion

You can also enter a data unit.

Legend

Deselect the Legend check box to hide the legend.

Sample

Series

You can edit a data series one by one in the Series menu, including parameters such as series name, line width, radius, area color, and more.

Click Add to add a new data series.

AddNewData

Series name

Click Delete to delete the current data series.

Data1

  • Series value: Make sure that the series value consists of the “series” value or “s” value of data parameters in the “Data” configuration tab.

  • Series name: You can enter a name for the data series.

Line

LineStyle

  • Color: Click the color block icon to select a line color from the color palette.

  • Style: Click the drop-down arrow to select a line style, such as solid line or dotted line.

  • Width: Click the plus (+) or minus (-) sign to adjust the line width.

  • Curve: Select this check box to change the line to a curve.

Point style

Deselect the Point Style check box to hide the dots in the chart.

DotStyle

  • Color: Click the color block icon to select the dot color from the color palette.

  • Radius: Click the plus (+) or minus (-) sign to adjust the dot size.

Area

Deselect the Area check box to hide the regions in the chart.

AreaDisplay

Click the drop-down arrow to select the fill effect of the region, such as Solid Fill and Gradient Fill.

Click the color block icon to change the fill color or gradient color from the color palette.

Drag the slider to adjust the gradation of the fill color.

Label

Deselect the Label check box to hide the tab in the chart.

Tag

Widget size and position

You can precisely control the size and position of each widget through this option.

FigureSize

Size

The width and height are measured by the pixel distance between the left and right sides, and between the upper and lower sides, of the widget’s border, respectively.

Position

The abscissa represents the pixel distance between the upper-left corner of the widget and the left border of the interface, and the ordinate represents the pixel distance between the widget and the upper border of the entire interface.

Add child widgets

In map widgets, the configuration pane displays the Add a Child Widget button, (outlined in red in the following figure).

undefined

The child widget list is directly above the Add a Child Widget button, and shows all the child widgets included in the current parent widget. You can click Delete on the right side of a child widget to delete the child widget.

When a child widget is added, it is immediately positioned at the bottom of the child widget list. The lower a child widget is arranged on the list, the closer its positioning is at the front (that is, the top) of the canvas.

Sub-component configuration

Click a child widget to configure the child widget using the Style and Data tabs. You can also click Back to return to Global Options or the child widget list.

Thank you! We've received your feedback.