FusionCharts for Flex > Creating Widgets > Angular Gauge > Configuring Dials

In this section, we'll see how to configure various aspects of the dials. Specifically, here we are going to explain how to:

Let's see how to perform each of the following tasks stated above.

 
Configuring background and border of dial

You can opt to have the dial fill in single color or in a gradient. To fill the dial using a single color, you can use:

<dial bgColor='666666' value='92' rearExtension='10' borderAlpha='0'/>

Here we've specified the dial background color as 666666 and hidden the border using borderAlpha='0'. This will result in:

You can also fill the dial with a gradient by specifying the list of colors separated as comma. Each color will then form an equal part of gradient. For example:

<dial bgColor='666666,FFFFFF,666666' value='92' rearExtension='10' borderAlpha='0'/>

This will result in:

You can configure to show/hide the dial border using:

<dial .... borderAlpha='0'/>

Here, we've set border alpha to 0 to hide it.

Additionally, you can configure border properties as under:

<dial bgColor='F1F1F1' value='92' rearExtension='10' borderColor='666666' borderThickness='1' borderAlpha='100'/>

This will result in:

 
Configuring radius of dial

You can make the length of dial longer/shorter by specifying its exact radius in pixels as shown below:

<dial value='92' rearExtension='10' radius='100'/>

This will result in:

 
Configuring base width, top width and rear extension

You can configure the base and top width of dials using:

<dial value='92' baseWidth='20' topWidth='4'/>

This will result in the image shown below. Here, we've also increased pivot radius as a result the thickness of both the base and top part of dial has increased.

You can opt for the dial to have a rear extension (i.e., extension on the opposite side) using:

<dial value='92' rearExtension='10' baseWidth='6'/>

This will result in:

 
Adding custom tool text for dial

You can add custom tool text for each dial using:

<dial value='92' ... toolText='Customer Satisfaction Index'/>

This will result in:

 
Adding multiple dials

You can add any number of dials to each chart. Each dial should have its own value and individual properties. The code for this is shown below.

<dials>
   <dial value='92' rearExtension='10' baseWidth='8' toolText='Current year'/>
   <dial value='79' bgcolor='FFFFFF' borderColor='999999' baseWidth='4' toolText='Previous year' rearExtension='10' showValue='0' radius='95'/>
</dials>

This will result in:
The visual stacking order of each dial would depend on its order in the XML document. That is, the dial defined first in the XML would appear at the bottom of the dial stack.