FusionCharts for Flex > Creating Widgets > Bulb Gauge > Configuration

Here, we'll explain the process to configure the various aspects of bulb gauge chart. We'll see how to:

Let's explain each one of them in detail.

 
Configuring bulb cosmetics

You can customize various aspects of the bulb. To configure its border, set:

<chart ... showGaugeBorder='1' gaugeBorderColor='666666' gaugeBorderThickness='2' gaugeBorderAlpha='100' ..>

This will result in:

You can also notify the chart to color gauge border in a derivative of its fill color. For this, set:

<chart ... gaugeBorderColor='{dark-30}' ...>

Here, we've used one token of the gradient fill mix to color bulb border using 30% darker color than its fill color. It will result in:

To customize bulb's origin and radius, set:

<chart ... gaugeOriginX='40' gaugeOriginY='40' gaugeRadius='20' ...>

This will result in:

To render the bulb with a 2D fill, set:

<chart ... is3D='0' ...>

This will result in:

 
Configuring gauge value

To display the gauge value inside the gauge, set:

<chart .. placeValuesInside='1' ..>

This will result in:

You can also opt to show the color range label of the value, instead of the numerical value. For this, set:

<chart .. useColorNameAsValue='1' ..>

This will result in:

Since our value was in the color range with label as "Low", the label is being displayed here. Similarly, had it been a higher value, it would display as shown below: