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.

See also

Element property 'Colors'

Designing a visualization element with a style color or a fixed color value
Designing a visualization element with a color gradient
Configuring a visualization element for color animation

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

Notice

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 appear.
Assign a style color to the rectangle. For example, select Elementfillcolor from the list box.
Define the degree of transparency in the Colors ‣ Normal state ‣ 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 appear.
Assign a fixed color value to the rectangle. Click 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.

See also

Applying Visualization Styles

Designing a visualization element with a color gradient

Requirement: The visualization editor is open.

Drag a Rectangle element to the visualization.
Select 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.

See also

Dialog 'Gradient Editor'

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.

You can see an example in the "Animating Visualization Elements" chapter.

See also