Widgets

The dashboard editor has a flexible canvas for widgets. Drag and drop widgets to put them where you want.

NocoDB dashboards have these widget types:

Widget TypeDescription
NumberDisplays KPIs and metric summaries
Bar ChartCompares values across categories
Line ChartShows trends over time
Pie ChartVisualizes parts of a whole
Donut ChartPie chart variant with a hollow center
TextDisplays static information
iFrameEmbeds external web content
Ask NocoAI

Copy a prompt, paste it into NocoAI in any base, and replace the words in [brackets] with your own.

  • Add a metric widget showing the number of records in [table]
  • Add a chart of [records by Status] to this dashboard
  • Rearrange this dashboard so the metrics are at the top
  • Remove the [widget name] widget

Adding Widgets

  1. Click Edit Dashboard. The dashboard editor opens.
  2. Use the widget toolbar at the top to add a widget. Click the widget type in the toolbar, or drag it onto the dashboard canvas.

widget-bar

Configuring Widgets

After you add a widget, configure its properties in the right panel. Each widget type has its own options, for example:

  • Data Source: Select the table and records to visualize.
  • Display Options: Customize labels, colors, and formatting.

For all options of a widget, refer to the page for that widget type.

Number Widget Config 1Number Widget Config 2

Arranging Widgets

Drag and drop widgets to change their position on the dashboard canvas. NocoDB uses a flexible grid layout, so you can put widgets where you want.

widget-reorder

Resizing Widgets

  1. Hover over the right corner of the widget. The resize cursor shows.
  2. Click and drag to change the widget size.

Some widget types have size limits. You can resize some widgets only horizontally.

Deleting Widgets

  1. In the widget header, click the 3-dot menu.
  2. Select Delete widget.

widget-actions

Duplicating Widgets

  1. In the widget header, click the 3-dot menu.
  2. Select Duplicate widget. NocoDB creates a copy of the widget.

Use a copy to make similar widgets with small differences.

widget-actions

Last updated on

Latest product updates?See Changelog
Stay in the loop? Follow us onLinkedInLinkedInYouTubeYouTubeXX