The cylinder gauge chart from FusionWidgets suite offers you a lot of configuration options. Here, we'll explain the process of:
Let's explain each one of them in detail. |
||||
Using palettes | ||||
The cylinder 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: |
||||
|
||||
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: |
||||
![]() |
||||
Customizing cylinder origin, radius & height | ||||
By default, FusionWidgets automatically calculates the best-fit co-ordinates and size for cylinder. However, if for some reason, you need to specify your own sizes for the gauge, you can do so by setting: <chart ... cylOriginX='30' cylOriginY='160' cylRadius='40' cylHeight='100' ...> Here, we've changed the origin of the cylinder, its radius and height. Origin of the cylinder refers to the bottom left portion of the cylinder. This results in: |
||||
![]() |
||||
Setting cylinder fill color | ||||
To set the cylinder fill color, use: <chart ... cylFillColor='ff5904' ...> This will result in: |
||||
![]() |
||||
Hiding chart value | ||||
To hide the chart's 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: |
||||
![]() |
||||
You can place the ticks to the left or right of cylinder. For this, set: <chart ... ticksOnRight='0' ...> |
||||
![]() |
||||
To configure the number of tick marks, 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, then 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 being shown, as under: |
||||
![]() |
||||
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: |
||||
![]() |