Color String Format

Colors for various elements in Visifire can be controlled using Color attribute. This topic describes the format for coloring.

Basic Solid Color fill:

There are two ways to fill color. You can set the color by giving the name of the color like Blue, Green etc or you can set a color by giving the exact value using Hex values #aarrggbb.

For a complete list of predefined colors click here.

Color using Hex values:

Hex value for a color is given in the following format #aarrggbb or #rrggbb

So, to give a solid color all you need to set the color attribute for the element as shown below:

Color="Blue"

Color="#FF0000FF" (Blue in #aarrggbb format)

Color="#0000FF" (Blue in #rrggbb format)

Linear Gradient fill:

In linear gradient fill you can give multiple colors and set the angle and extent to which the color must spread.

The format to set linear gradient is:

<Angle> ; <Color Code1> , <Stop1>;<Color Code2> , <Stop2>;...

Suppose you want the gradient from Blue to Green. Just say Color="0;Blue,0;Green,1"

Here is a set of gradients and the format string that was used to generate them.

Note: Be careful with the semicolon(;) and comma (,) for the color format string.

Angle can take any value from -360 to 360. The following figure shows how angle is defined in Visifire.

Stops indicate where the color should appear. If you give stop value as 0 then it means the beginning and if you give the stop value as 1 it means the end of the element. So any number in between places the color at a certain distance from the beginning of the element. By changing the angle you can turn the entire gradient of the Chart element around.

Example:

<vc:Chart Color="0;#efabec,0;#fcadef,1"></vc:Chart>

<vc:PlotArea Color="0;#adabce,0;#fcadef,0.5;#befadf,1" />

<vc:Chart Color="0;Blue,0;Cyan,0.25;Green,0.5;Yellow,0.75;Red,1"></vc:Chart>

Radial Gradient fill:

Radial gradient gives similar effect as linear gradient but the gradient changes radially outwards.

The format for radial gradient is as shown below.

<Center X>; <Center Y> ; <Color Code1> , <Stop1>;<Color Code2> , <Stop2>;...

The Center X and Center Y takes values between 0 - 1. The following set of examples which will show how to use radial gradient.

Example:

<vc:DataSeries Color="0;1;#efabec,0;#fcadef,0.5;#abefdc,1"></vc:DataSeries>

<vc:ToolTip Color="0.5;0.5;Blue,1;Cyan,0.75;Green,0.5;Yellow,0.25;Red,0"/>