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: |
||||||
|
||||||
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: |
||||||
![]() |