# Display Widgets

Display widgets are used to visualize data for your end-users. They take data from your functions and present it in various forms, such as charts, gauges, maps, and tables. These widgets are the key to creating rich, data-driven dashboards and user interfaces.

{% hint style="info" %}

#### Categorization by main usage

We categorize widgets based on their primary purpose. However, some widgets are versatile; for example, a [form](/app-builder/build-frontend/widgets/input-widgets/form.md) (an [input widget](/app-builder/build-frontend/widgets/input-widgets.md)) can display data, while a [data grid](/app-builder/build-frontend/widgets/display-widgets/data-grid.md) (a [display widget](/app-builder/build-frontend/widgets/display-widgets.md)) can be used for data input. Always check the specific properties of a widget to see its full range of capabilities.
{% endhint %}

## Available display widgets

Each display widget has its own detailed documentation page.

* [**Card**](/app-builder/build-frontend/widgets/display-widgets/card.md): A container element you can use for structure and group backgrounds.
* [**Chart**](/app-builder/build-frontend/widgets/display-widgets/chart.md): A component for creating line, bar, area, or scatter charts.
* [**Chat**](/app-builder/build-frontend/widgets/display-widgets/chat.md): Allows for building conversational interfaces in [RAG](/app-builder/build-backend/function-explorer/extensions/rag-ai.md) use cases.
* [**Circular Gauge**](/app-builder/build-frontend/widgets/display-widgets/circular-gauge.md): Visualizes a primary value and a secondary sub-value in a circular form.
* [**Data Grid**](/app-builder/build-frontend/widgets/display-widgets/data-grid.md): A powerful component for displaying and interacting with database tables.
* [**Data List**](/app-builder/build-frontend/widgets/display-widgets/data-list.md): Displays a collection of items in a simple, scrollable list view.
* [**Data Tiles**](/app-builder/build-frontend/widgets/display-widgets/data-tiles.md): Displays a collection of items in a responsive, tiled view.
* [**Kanban Board**](/app-builder/build-frontend/widgets/display-widgets/kanban.md): An interactive board for visualizing items across different stages of a process.
* [**Linear Gauge**](/app-builder/build-frontend/widgets/display-widgets/linear-gauge.md): Visualizes a primary value and a secondary sub-value in a linear bar form.
* [**Map**](/app-builder/build-frontend/widgets/display-widgets/map.md): Marks geographic data points on an interactive map.
* [**Media View**](/app-builder/build-frontend/widgets/display-widgets/media-view.md): Allows the dynamic display of media, such as images, videos, or PDFs.
* [**Pie Chart**](/app-builder/build-frontend/widgets/display-widgets/pie-chart.md): A classic chart for visualizing proportions.
* [**Progress Bar**](/app-builder/build-frontend/widgets/display-widgets/progress-bar.md): Visualizes the progress of a process as a percentage or absolute value.
* [**Sankey**](/app-builder/build-frontend/widgets/display-widgets/sankey.md): Visualizes the flow and distribution of data between two sets of values.
* [**Sparkline**](/app-builder/build-frontend/widgets/display-widgets/sparkline.md): A small, simple line chart without axes, ideal for inline data trends.
* [**Status Lamp**](/app-builder/build-frontend/widgets/display-widgets/status-lamp.md): Displays a mappable status as a colored light.
* [**Toast**](/app-builder/build-frontend/widgets/display-widgets/toast.md): A time-limited notification message that appears briefly to the user.
* [**Value Box**](/app-builder/build-frontend/widgets/display-widgets/value-box.md): A flexible box for displaying a key data point or arbitrary information.

## Connecting to logic (data binding)

Display widgets receive their data from your functions.

### How to link

You link widgets by dragging the logic to the UI:

1. Drag an output or [modifier](/app-builder/build-backend/modifier.md) of a [function](/app-builder/build-backend/functions.md) and drop it onto the widget.
2. A menu will appear on the function block; pick the specific widget property you want to link (e.g., `value` or `data`).

### Interaction types

* **From function output / from modifier**: A function sends a primary value (like a time series) to the widget's `data` property.
* **To function input**: Certain display widgets, such as the data grid, support input as well. In these cases, you can connect the widget to a function input. It will then behave like an input widget, sending selected rows or edited cells back to your logic.


---

# Agent Instructions: 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:

```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.