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.

Categorization by main usage

We categorize widgets based on their primary purpose. However, some widgets are versatile; for example, a form (an input widget) can display data, while a data grid (a display widget) can be used for data input. Always check the specific properties of a widget to see its full range of capabilities.

Available display widgets

Each display widget has its own detailed documentation page.

• Card: A container element you can use for structure and group backgrounds.

• Chart: A component for creating line, bar, area, or scatter charts.

• Chat: Allows for building conversational interfaces in RAG use cases.

• Circular Gauge: Visualizes a primary value and a secondary sub-value in a circular form.

• Data Grid: A powerful component for displaying and interacting with database tables.

• Data List: Displays a collection of items in a simple, scrollable list view.

• Data Tiles: Displays a collection of items in a responsive, tiled view.

• Kanban Board: An interactive board for visualizing items across different stages of a process.

• Linear Gauge: Visualizes a primary value and a secondary sub-value in a linear bar form.

• Map: Marks geographic data points on an interactive map.

• Media View: Allows the dynamic display of media, such as images, videos, or PDFs.

• Pie Chart: A classic chart for visualizing proportions.

• Progress Bar: Visualizes the progress of a process as a percentage or absolute value.

• Sankey: Visualizes the flow and distribution of data between two sets of values.

• Sparkline: A small, simple line chart without axes, ideal for inline data trends.

• Status Lamp: Displays a mappable status as a colored light.

• Toast: A time-limited notification message that appears briefly to the user.

• 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 of a function 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.