Assigning a Color

You configure the color of a visualization element either statically by means of the Color property, or dynamically by assigning an application variable by means of the Color variables property. Depending on the element, color assignments are also available in other properties. For example, for the font color, this is provided in the Text property of a labeled element.

For the static assignment of a color value, you can always use the color dialog in the properties editor, which provides color palettes to choose from.

You can specify the color as a style color. Style colors are color names for color definitions from the actively applied style. When configuring an corresponding property, you are provided with a list of available style colors. We recommend that you use style colors because then you can change colors centrally by means of a style selection or a style customization. You can also open the Color dialog to select a value from color palettes.

In addition, you can define the fill color of an element as a Gradient. Then the color changes linearly, radially, or axially from the initial color to the final color. You configure the Gradient setting in the Gradient Editor dialog.

Designing a visualization element with a style color or a fixed color value

Important

A color assignment with style color allows for easy global color changes.

Requirement: The visualization editor is open.

Insert some Rectangle elements.
Select an element.
The Properties view is active.
Click in the Colors → Normal state → Fill color property.
A list box and the button are displayed.
Assign a Style color to the rectangle. For example, select Element fill color from the list box.
Define the degree of transparency in the Colors → Normal status → Fill color → Transparency property: Use the slider to select the value 136.
Select another rectangle. Click in the Colors → Normal state → Fill color property.
A list box and the button are displayed.
Assign a fixed color value to the rectangle. Click the button to do this.
The Color dialog opens.
Select a standard color or Define Custom Colors to fine-tune your selection. Then click OK.
The color is set as a fixed value. The color is displayed as a small rectangle. The RGB values are also indicated next to it.
Click in the Colors → Normal state → Fill color → Transparency property.
Use the slider to select the value 136.
The color is semitransparent.

For more information, see: Applying Visualization Styles

Designing a visualization element with a color gradient

Requirement: The visualization editor is open.

Drag a Rectangle element to the visualization.
Enable the Colors → Use gradient color property.
Click in the Colors → Gradient setting property.
The Gradient Editor dialog opens.
Define the color gradient for the element:
- Gradient type: Radial
- Standard radial: Center
The fill color of the element changes radially from white to black.

Configuring a visualization element for color animation

The Color variables property, which certain elements may have, is used for the color animation of the element. If you assign a variable there, then you can program color changes in the application code or configure a user input that results in a color change.

For more information, see: Animation of elements and Animating a Color Display