> 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/app-builder/build-frontend/widgets/display-widgets.md). # Display widgets Display widgets render data as charts, gauges, maps, and tables. These components receive values from functions and modifiers to display them live, forming the core building blocks of dashboards and data-driven interfaces. {% hint style="info" %} #### Widget versatility and categorization The platform groups widgets by their primary purpose, though many serve multiple roles. 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 and 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 capture input. Check the properties of each widget to see its full capabilities. {% endhint %} ## Available display widgets * [**Card**](/app-builder/build-frontend/widgets/display-widgets/card.md): Groups and structures other layout elements. * [**Chart**](/app-builder/build-frontend/widgets/display-widgets/chart.md): Renders line, bar, area, and scatter charts. * [**Chat**](/app-builder/build-frontend/widgets/display-widgets/chat.md): Provides a conversational interface for RAG use cases. * [**Circular gauge**](/app-builder/build-frontend/widgets/display-widgets/circular-gauge.md): Displays a primary value and a secondary sub-value on a circular dial. * [**Data grid**](/app-builder/build-frontend/widgets/display-widgets/data-grid.md): Displays database records in an interactive table that supports viewing and editing. * [**Data list**](/app-builder/build-frontend/widgets/display-widgets/data-list.md): Displays a scrollable list of items. * [**Data tiles**](/app-builder/build-frontend/widgets/display-widgets/data-tiles.md): Arranges items into responsive tile layouts. * [**Dynamic group**](/app-builder/build-frontend/widgets/dynamic-group.md): Bundles multiple widgets together to act as a repeated container driven by data. * [**Iframe**](/app-builder/build-frontend/widgets/display-widgets/iframe.md): Embeds external web pages or applications inside the interface. * [**Kanban**](/app-builder/build-frontend/widgets/display-widgets/kanban.md): Arranges items on an interactive board to track process stages. * [**Linear gauge**](/app-builder/build-frontend/widgets/display-widgets/linear-gauge.md): Displays a primary value and a secondary sub-value on a linear bar. * [**Map**](/app-builder/build-frontend/widgets/display-widgets/map.md): Displays geographic data points on an interactive map. * [**Media view**](/app-builder/build-frontend/widgets/display-widgets/media-view.md): Displays images, videos, or PDF files dynamically. * [**Pie chart**](/app-builder/build-frontend/widgets/display-widgets/pie-chart.md): Displays proportional data as parts of a whole. * [**Progress bar**](/app-builder/build-frontend/widgets/display-widgets/progress-bar.md): Displays process progress as a percentage or an absolute value. * [**Sankey**](/app-builder/build-frontend/widgets/display-widgets/sankey.md): Displays the flow and distribution of values between datasets. * [**Sparkline**](/app-builder/build-frontend/widgets/display-widgets/sparkline.md): Displays a compact line chart without axes to show inline trends. * [**Status lamp**](/app-builder/build-frontend/widgets/display-widgets/status-lamp.md): Displays operational status using a colored light indicator. * [**Timeline**](/app-builder/build-frontend/widgets/display-widgets/timeline.md): Displays state changes over a time span, such as machine production and downtime phases. * [**Toast**](/app-builder/build-frontend/widgets/display-widgets/toast.md): Displays brief temporary notifications. * [**Value box**](/app-builder/build-frontend/widgets/display-widgets/value-box.md): Displays a single key figure or individual content block. ## Data binding Display widgets receive data from functions and modifiers. Drag from a function or modifier onto the widget. The selected slot determines the data direction: * **Function output or modifier to widget**: A function output or modifier writes into a widget property, such as a time series array feeding into a chart data property. This is the primary direction for display widgets. * **Widget to function input**: Certain display widgets, such as the data grid, send data back to backend logic. A widget event flows into a function input along with its data payload, transmitting edited cells or selected rows the moment they change. See [Widgets](/app-builder/build-frontend/widgets.md#data-binding) for the full mechanics. --- # 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/app-builder/build-frontend/widgets/display-widgets.md?ask=&goal= ``` `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.