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