Widgets

value

4min

Show values and amounts for a quick overview or visual representation on a widget, such as sales targets or the number of orders to date. The value can be a number or date and time.

Value widget
Value widget


Configuration options

Core options



value

Provide the value to be shown on the widget surface. You can use a string, expression or datasource.

Other options



align

Align the value either left, right or center.

bottom

The titles component will be added to the bottom of the widget.

footer

Add text to the footer of the widget.

footerAlign

Align the footer text to left, right, center.

format

Various formats available for the value which is of type date and number, for example, currency.

placeholder

Specify a placeholder text to display if there is no data, for example - title: No data to display.

style

By default the value is positive. To show a negative value set the style: isNegative to true.

top

The titles component will be added to the top of the widget.

Examples and code snippets 

Value widget with number
Value widget with number


This example shows a value widget configured with a number value, a format unit and align right. A component.title is added at the top and component.trend at the bottom to show additional information.

Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.

value-widget-2x2 (static)
value-widget-2x2 (dynamic)

Value widget with date and time
Value widget with date and time


This example shows a value widget configured with a date and time value and a dateFormat to show HH:mm and align center. A component.title is added at the top and at the bottom to provide additional information about the meeting.

Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.

value-widget-2x4 (static)
value-widget-2x4 (dynamic)

Value widget with currency format
Value widget with currency format


This example shows a value widget configured with an number value and a Format to show currency and align center. A component.title is added at the bottom to provide additional information about the billing and quarter.

Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.

value-widget-4x2 (static)
value-widget-4x2 (dynamic)




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No