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

Let's see them one by one.

 
Configuring bulb cosmetics

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

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

This results in:

Or, you can also ask the chart to color gauge border in a derivative of its fill color using:

<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:

You can customize bulb's origin and radius using:

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

This results in:

You can opt to render the bulb with a 2D fill using:

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

This results in:

 
Configuring gauge value

You can opt to show the gauge value inside the gauge using:

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

This results in:

You can also opt to show the color range label of the value, instead of the numerical value using:

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

This results 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 show as under: