Display Widgets

Display Widgets are used to visualize data for your end-users. They take data from your backend logic 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.

Available Display Widgets

The following is a list of the core display widgets available. Each has its own detailed documentation page.

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

• Chat: Allows for building conversational interfaces with an AI.

• 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 status as a colored light (e.g., green for 'online', red for 'error').

• 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 Backend Logic (Data Binding)

Display widgets receive their data from your backend logic via data binding. As explained in the main Widgets guide, this is done by connecting a function's Output to one of the widget's properties.

Each display widget has one or more Properties that can be controlled by your logic. While most have a primary data property, many offer other properties to dynamically control their behavior or appearance. When you link a function's output to a widget, you can click on the property name in the function's output to select which of the widget's available properties you want to control. A single display widget can be linked to multiple functions simultaneously.