The LED gauge chart from FusionWidgets suite offers a lot of configuration options. Here, we'll explain the process of:
Let's explain each one of them in detail. |
Using palettes |
The LED 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, you need to set: <chart palette='2' or '3' or ..> Shown below are a few examples of palettes applied on our previous chart: |
![]() |
Palette 2 applied |
![]() |
Palette 3 applied |
Additionally, you can also define an entire new palette by setting a single theme color. For this, set: <chart paletteThemeColor='669933' ..> This will create a new palette derived from this color and then color the chart as shown below: |
![]() |
Using single color for LED fill/LED background |
When you divide the LED scale into color range, the LED bars in each zone take up the fill color of that color range. However, if you want the entire LED bars to be filled with a single color (color of the range in whose zone the current value is falling), you need to set: <chart ... useSameFillColor='1' ...> This will result in: |
![]() |
As you can see above, all the LED bars are now colored in green, since the value of chart (102) is in green zone. Similarly, if value was say 67 (in yellow zone 60-90), it would appear as the image shown below: |
![]() |
You can also make the non-activated (background) LEDs of the same color. For this, set: <chart ... useSameFillBgColor='1' ...> |
Customizing gauge properties |
To hide the gauge border, set: <chart showGaugeBorder='0' ...> Or, to customize gauge border properties, set: <chart ... gaugeBorderColor='FFFFFF' gaugeBorderThickness='2' gaugeBorderAlpha='100' ...> This will result in: |
![]() |
To configure the background color for gauge, set: <chart ... gaugeFillColor='CCCCCC' ...> |
Configuring LED Size & Gap |
To configure LED size & gap in pixels, set: <chart ... ledSize='5' ledGap='5' ..> This will result in: |
To make the LEDs continuous, you can set ledGap as 0 as shown below: <chart ... ledSize='1' ledGap='0' ...> This will result in: |
![]() |
Hiding chart value |
To hide the chart value, 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 above gauge (or on left/right in vertical LED), set: <chart ... ticksBelowGauge='0' ..> or <chart ... ticksOnRight='0' ...> This will result in: |
![]() |
To configure the number of tick marks as under, 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 need to add: <chart ... adjustTM='0' majorTMNumber='8' minorTMNumber='3' ...> To show every nth tick value, set: <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' ...> This will result in: |
![]() |