> For the complete documentation index, see [llms.txt](https://docs.heisenware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets.md).

# Display widgets

The App Builder provides a diverse range of display widgets to visualize data in any form. Display widgets are closely aligned with [function output](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/data-processing/functions/output.md), as they commonly receive data to be visualized and other properties to be set from a function.

## Display widgets

The following display widgets are available:

* [Chart](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/chart-wip.md): Classic line, bar, area, or scatter chart
* [Chat](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/chat.md): Allows chatting with [AI](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/building-with-ai-wip.md)
* [Circular gauge](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/circular-gauge-wip.md): Visualizes a value and sub-value in circular form
* [Data grid](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/data-grid-wip.md): Allows visualizing database tables
* [Linear gauge](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/linear-gauge-wip.md): Visualizes a value and sub-value in linear form
* [Map](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/map.md): Marks geodata in an interactive map
* [Media view](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/media-view-wip.md): Allows the dynamic display of media such as images
* [Progress bar](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/progress-bar.md): Visualizes the percentage or absolute progress of a process or time
* [Sparkline](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/sparkline-wip.md): Small line chart without axes or coordinates
* [Status lamp](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/status-lamp-wip.md): Displays the status as a color, e.g., that of a backend function
* [Toast](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/toast-wip.md): Time-limited display of notifications
* [Value box](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets/value-box-wip.md): Flexible display of arbitrary data or a data point

## Set property from backend

Data and behavior properties of display widgets must be set from one or more [functions](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/data-processing/functions.md) of the backend. To enable this data transfer, a display widget must be linked with the output box of a function or with a modifier. It's important to note that display widgets have the flexibility to be linked with multiple functions simultaneously. 

### Link widget and function

To link a display widget with an output box or a modifier:

1. Select a display widget in the UI editor.
2. Drag and drop an output/modifier onto the selected widget.

When the link is established, the output/modifier indicates it with stating the property to be set. 

Click the `x` next to the text to unlink an output widget from an output/modifier. 

### Properties

Most display widgets primarily provide a main data property. However, certain display widgets go beyond, allowing visualization of additional data properties and offering behavior properties to manipulate. To modify the property set by the backend, follow these steps:

1. Link widget and function as explained above.
2. Click on the property in the linked output/modifier to open a list of available properties.
3. Select the desired property from the list.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/display-widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.