--- title: "Radial Gauges" slug: "gauges-unit-test" updated: 2024-04-17T19:57:50Z published: 2024-04-17T19:57:50Z canonical: "support.tulip.co/gauges-unit-test" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Radial Gauges *Visually represent your values on a radial scale and make it clear for the operator when values approach limits.* [Video for "VID_Gauge_Unit_Test_2023_1920x1080.mp4"](https://tulip.widen.net/view/video/3aozwcc6pa/VID_Gauge_Unit_Test_2023_1920x1080.mp4?u=dtggv3) ### Purpose The Radial gauge custom widgets Display numerical values and ranges on a radial scale. Radial Gauge is a multi-purpose data visualisation control that displays numerical values on a Semi-Circular scale. It has a rich set of features such as ranges, pointers, and colours that are fully customizable and extendable. **Use it to create speedometers, temperature monitors, dashboards, activity gauges, compasses, and more.** Radial Gauges are designed to make a way to display numerical values and ranges on a radial scale. Radial gauge can have a minimum value (starting value to the left) and maximum value (ending value to the right) set. When you set up the Value prop, this will determine the pointer position compared to the Max and Min props. ### Setup Radial Gauges are designed to make a way to display numerical values and ranges on a radial scale. Radial gauge can have a minimum value (starting value to the left) and maximum value (ending value to the right) set. When you set up the Value prop, this will determine the pointer position compared to the Max and Min props. ### Gauge SVG: this segmented gauge will have 3 colour background with ranges 0-33 (Red) , 33-67 (Yellow), 67-100 (Green). **Properties** Value - Value the needle should point to. Min Value - Value to be used as Minimum Value Max Value - Value to be used as Maximum Value Title - Text to be displayed as Gauge Title **Events** Error - Fires when value is outside Min Value and Max Value range ![Screenshot 2023-03-23 at 12.00.21.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202023-03-23%20at%2012.00.21.png) ### Gauge with Region If region lower limit and upper limits are provided, it can be highlighted in a different colour. The event will return true or false based on whether the value falls within the inner region or not. For eg., 50-75 is an inner region highlighted with a different Custom colour. **Properties** Value - Value the needle should point to. Min Value - Value to be used as Minimum Value Max Value - Value to be used as Maximum Value Title - Text to be displayed as Gauge Title Lower Limit - Value for Lower Limit of Inner Region Upper Limit - Value for Upper Limit of Inner Region Background - Color for Gauge Background Region - Color for Inner Region Background **Events** Error - Fires when value is outside Min Value and Max Value range Status - Returns true when the value falls within the inner region, false otherwise ![Screenshot 2023-03-23 at 12.00.32.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202023-03-23%20at%2012.00.32.png) ### Gauge with Background Color Gauge with background can be used to set custom colour background to the gauge. Value - Value the needle should point to. Min Value - Value to be used as Minimum Value Max Value - Value to be used as Maximum Value Title - Text to be displayed as Gauge Title Background - Color for Gauge Background **Events** Error - Fires when value is outside Min Value and Max Value range ![Screenshot 2023-03-23 at 12.00.38.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202023-03-23%20at%2012.00.38.png) ### How it works You should configure the properties and events of your custom widgets to take as input a static value, a variable or a table record value used in your application. ![Screenshot 2023-03-14 at 14.49.54.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202023-03-14%20at%2014.49.54.png) *You can configure the properties of your custom widget in the Widget pane of your app editor. In this example, the custom widgets properties are configured to take the variables Value, Minimum and Maximum as inputs. However, these can be also a static value or a table record value.** ### Further Reading - [Learn More about Custom Widgets](/r230/docs/custom-widgets-overview) - [5S Result Radar Chart Unit Test](/r230/docs/5s-result-radar-spider-chart-widget) - [Step by Step Menu Unit Test](/r230/docs/step-by-step-menu-unit-test)