---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-data-value
widgetname: Data Value
description: "This documentation details a widget for displaying numerical values with customizable gauge types and settings"
---

# Data Value

![dataValueIcon][dataValueIcon]

## Overview

The Data Value widget provides a mechanism to display values by using a preset list of gauges. An example is shown below, where a Data Value widget is used to show the gauge on the right:

![dataValueExample][dataValueExample]

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing a data value set configuration wizard.](images/datavalue_general_wizard.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![Diagram showing a widget customization interface with options for border width and color.](images/data_value_style.png)

2. In the **Layout** tab, you can customize the visual properties of the widget:

      * **Gauge Type** - Select the type of gauge to display the data value. The options are Number, Delta, Data Indicator, Number + Delta, Number + Delta Side, Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, Full Circle, and Thermometer.
      * **Title** - Set the title for the data value displayed on the gauge.
      * **Subtitle** - Set the subtitle for the data value displayed on the gauge.
      * **Data Label** - Specify a string to be shown in place of the value when Use Name As Secondary Value is `true`.
      * **Show Animations** - Enable or disable animations for chart transitions and interactions. This option is set to `false` by default.
      * **Value** - The numerical value to be displayed on the gauge.
      * **Units** - Specify the units for the gauge value.
      * **Minimum** - Set the lowest limit of the gauge scale.
      * **Minimum Target Lower** - Define the minimum lower target limit for the gauge.
      * **Target Lower** - Set the lower target limit for the gauge.
      * **Target** - Define the target value for the gauge.
      * **Target Upper** - Set the upper target limit for the gauge.
      * **Maximum Target Lower** - Define the maximum lower target limit for the gauge.
      * **Maximum** - Set the highest limit of the gauge scale.
      * **Show Primary Label** - Enable or disable the display of the primary value on the gauge. This option is set to `false` by default and is available for Data Indicator, Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, Full Circle, and Thermometer types.
      * **Show Secondary Label** - Enable or disable the display of the secondary value on the gauge. This option is set to `false` by default and is available for Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, and Full Circle types.
      * **Use Name as Secondary Value** - Decide whether to show the "Value" or the "Data Label" in the secondary label. This option is set to `false` by default and is available for Progress Bar, Vertical Bar, Half Circle, and Full Circle types.
      * **Combine Labels** - Combine the primary and secondary labels. This option is set to `false` by default and is available only for the Progress Bar type.
      * **Is Percentage Value** - Specify if the value should be treated as a percentage. This option is set to `false` by default and is available for Half Circle and Full Circle types.
      * **Use Background Color** - Enable or disable the background color on the gauge. Default is green and is set to `false`. Available for the Number gauge type.
      * **Decimal Places** - Set the number of decimal places to display on the gauge.
      * **Custom Color** - Choose a custom color for the gauge instead of the default color.
      * **Invert Colors** - Invert the colors of the gauge. This option is set to `false` by default and is available for Number, Delta, Data Indicator, Number + Delta, and Number + Delta Side types.

    ![Screenshot showing a data value layout customization interface with options for gauge inversion.](images/datavalue_layout_wizard.png)

3. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Screenshot showing a data value links customization wizard with options for linking to other UI elements.](images/datavalue_links_wizard.png)

4. By saving and closing the settings, the widget will be changed accordingly.

## Using the Fill Settings Feature

{% include-markdown 'includes/pages/fill_settings_ui_pages_widgets.md' %}

![Screenshot showing a UI with a field labeled "Data Value" and a filename hint reading "data value fill settings".](images/data_value_fill_settings.png)

## Real Use Case

To configure a Data Value widget with a Radial gauge type, follow the steps below.

1. Choose the Gauge Type, in this case Radial gauge and configure the Title, Subtitle and Data Label. Choose whether to show animations by setting the toggle button to `true`.

    ![data value use case](images/datavalue_layout_radial_gauge.png)

2. Define the Value, Units, Minimum, Minimum Target Lower, Target Lower, Target, Target Upper, Maximum Target Upper, Maximum. Also choose whether to show the primary and secondary labels by setting the toggle buttons to `true`.

    ![data value use case](images/datavalue_layout_radial_gauge_2.png)

3. If you follow the steps before, the end result should be something similar to the image below.

    ![data value use case](images/datavalue_final_result_radial_gauge.png){width=500}

[dataValueIcon]: images/uiDataValue.png
[dataValueExample]: images/uiPageExample5.png