FusionCharts for Flex > Creating Widgets > Thermometer Gauge > Configuration

The thermometer gauge chart from FusionWidgets suite offers a lot of configuration options. Here, we'll see the process of:

Here let's explain each of them in detail.

 
Using palettes

The thermometer gauge offers 5 pre-defined color palettes for you to choose from. Each of these palettes are accessible by the number 1-5. To choose a palette, all you need to do is set:

<chart palette='2' or '3' or ..>

Shown below are a few examples of palettes applied on our previous chart:

Palette 2
Palette 3
Custom palette color using

<chart paletteThemeColor='669933' ..>

 
Customizing gauge properties

To customize thermometer fill color, set:

<chart ... gaugeFillColor='FF5904' gaugeFillAlpha='100' ... >

This results in:

To change the border color, set:

<chart ... showGaugeBorder='1' gaugeBorderColor='FF5904' gaugeBorderThickness='2' gaugeFillColor='FF5904' gaugeBorderAlpha='80' gaugeFillAlpha='40' ...>

This will result in:

 
Manually setting thermometer radius & height

By default, FusionWidgets automatically calculates the best thermometer radius and height. However, if you need to set it manually, you can use:

<chart ... thmBulbRadius='25' thmHeight='220' ..>

This will result in:

This is effective when you're using annotations to create background elements for your thermometer.
 
Hiding chart value

To hide the value for the chart, set:

<chart ... showValue='0' ..>

This will result in:

 
Configuring tick marks & values

To hide all tick marks & values, set:

<chart ... showTickMarks='0' showTickValues='0' ...>

This will result in:

To place the ticks to the left or right of thermometer, set:

<chart ... ticksOnRight='0' ...>

This will result in:

To configure the number of tick marks as shown below, set:

<chart ... majorTMNumber='8' minorTMNumber='3' ...>

It will result in:

The chart can automatically adjust the number of major ticks to a best feasible value. However, if you do not want the chart to perform the same, you can add:

<chart ... adjustTM='0' majorTMNumber='8' minorTMNumber='3' ...>

You can opt to show every nth tick value by setting:

<chart ... tickValueStep='2' ...>

This will result in every 2nd major tick mark's value as shown below:

To configure tick mark cosmetics set:

<chart ... majorTMColor='333333' majorTMAlpha='100' majorTMHeight='10' majorTMThickness='2' minorTMColor='666666' minorTMAlpha='100' minorTMHeight='7' minorTMThickness='1' tickMarkDistance='2'...>

This will result in: