Configure components

Add a component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. In the search box above the component list to the left of the canvas, enter dashboard to find the component, and then drag it to the canvas.

4. On the Select Dashboard Template page, click Create Blank Dashboard or select a preset template, and then click OK.

5. In the Style pane on the right side of the web application editor, click Edit Dashboard.

   After you finish developing in the dashboard editor and return to the workbench, the dashboard component automatically syncs the changes. If the component does not update, click the Refresh button in the upper-right corner of the thumbnail to refresh it.

6. On the canvas editor page, click the component list icon in the upper-left corner to expand the Component List page.

   After you expand it, you can view the categories and counts for all components, including column chart, line chart, pie chart, scatter plot, and Others. You can also filter them by using the All Available Components drop-down list at the top.

7. On the Asset List page, click a component type icon in the navigation pane on the left, select a component, and add it to your visualization project.

   This example uses a column chart component.

   After the component is added, it automatically appears on the canvas. You can drag the border of the component to resize it. Click the component and drag it to adjust its position.

Configure basic component styles

In the dashboard component editor, clicking a component on the canvas displays its configuration panel on the right.

• In the Basic Properties section, you can adjust the component's size, position, rotation angle, and opacity.

  • Chart Size: Includes the width and height of the component in pixels (px). You can click the icon to lock the aspect ratio and resize the component proportionally. Click the icon again to unlock it, allowing you to change the width and height independently.

  • Chart Position: Includes the x-coordinate and y-coordinate of the component in pixels (px). The x-coordinate is the distance from the upper-left corner of the component to the left edge of the page. The y-coordinate is the distance from the upper-left corner of the component to the top edge of the page.

  • Rotation Angle: Rotates the component around its center. The unit is degrees (°).

    • Enter an angle value to set the rotation angle.

    • Drag the black dot inside the icon to set the rotation angle.

    • Click the icon to flip the component horizontally.

    • Click the icon to flip the component vertically.

  • Opacity: The value range is 0 to 1. A value of 0 hides the component, and a value of 1 makes it fully visible. The default value is 1.

• Color picker: Use the color picker to set the font color, axis line color, grid line color, border color, and more. The following describes how to adjust text color in two ways.

  • Common color palettes: Click the color preview block next to the color value to open the Common Colors panel. This panel provides a grid of preset color blocks. Click a color block to apply it as the current text color.

  • Color Picker: Adjust the color transparency, add or remove global colors, and select recently used colors.

    • Adjust font color transparency: Drag the transparency slider or modify the A value to adjust the color transparency.

    • Add or remove global colors: In the color picker, select a color. Click + under Global Colors to add it as a global color. To delete a global color, hover over it and drag it outside the Global Colors area.

      Note

      Colors selected from Global Colors can be used across the entire visualization project. They appear in the Recently Used section for all dashboards and components for easy reuse.

    • The Recently Used section automatically lists colors you have recently used. To reuse a color, click its color block to apply it.

Supported component list