Click a widget on the canvas. The configuration panel appears on the right-side of the canvas. The panel includes three tabs:Style, Data, and Interaction.

Configuration items are collapsed and grouped based on different levels. The Style tab displays Basic Attributes. Other content is collapsed to make the item structure more clear and ease classification and searches.

The following example uses a line chart.

Basic Attributes

In the basic attributes bar, you can adjust the size, position, rotation angle, and opacity of the widget.

  • Size

    The border width and height are measured by the pixel distance between the left and right sides and between the upper and lower sides respectively.

    Click the plus (+) or minus (-) signs, or enter a number to adjust the Width and Height.

  • Position

    The X-Y position of the widget. The Abscissa is the difference between the distance of the chart's upper left corner to the page's left-side border. The Ordinate position is the distance between the chart's and the page's upper border.

    Click the plus (+) or minus (-) signs, or enter a number to adjust the Abscissa and Ordinate.

  • Others
    • Rotation angle: Rotate around the center point of the widget. Click the plus (+) or minus (-) signs, or enter a number to adjust the rotation angle.
    • Click the plus (+) or minus (-) signs, or enter a number (0-1) to adjust the opacity.

Color picker

You can use the color picker to configure attributes such as a widget's font color, axis color, grid line color, and border color. This document will show you two ways to change text color.
  • Click the left-side commonly used color block icon to pick a color.

    Beginners can quickly select from the built-in commonly used colors when using the commonly used color block to easily and efficiently modify corresponding widgets.

  • Click the color wheel icon on the left-side to adjust the font color opacity, add or remove global colors, or select recently used colors.

    • Adjust font color opacity

    • Add or remove global colors

    • Select recently used colors

    Colors selected through the Global Colors bar are applied throughout the entire project, and saved in the Recently Used bar.