Dashboard Builder: Widgets, Layout, and Configuration

The Builder Interface

The dashboard builder is where you design and configure your dashboards. It consists of four main areas:

1. Toolbar (top) -- Save, Undo, Redo, Add Widget, Preview, and Settings buttons
2. Canvas (center) -- the grid where widgets are placed and arranged
3. Widget Panel (right, appears when editing a widget) -- configuration options for the selected widget
4. Widget Picker (overlay, appears when adding a widget) -- the catalog of available widget types

The Widget Lifecycle

Every widget goes through these stages:

1. Add -- pick a widget type from the picker
2. Configure -- set data source, field mappings, filters, and appearance
3. Place -- position and size it on the grid
4. Preview -- see it with live data
5. Save -- persist the dashboard state

You can revisit any stage by clicking a widget to select it, then using the toolbar buttons or the widget panel.

Widget Configuration (Detailed)

When you click a widget to edit it, the right panel shows four tabs:

Data Tab

This is where you connect the widget to your data.

Data Source -- select from your connected sources. Each widget connects to exactly one source.

Query Type -- use the form-based interface to select columns and aggregations visually.

Columns/Fields -- select which fields to use. The available mapping depends on the chart type:

Aggregation -- for metric and chart widgets, choose: Sum, Average, Count, Min, Max, Median, or Distinct Count.

Filters -- add conditions to narrow the data: - Date range (last 7 days, last 30 days, this month, custom) - Field equals/not equals a value - Field greater than/less than a value - Field contains/starts with/ends with text

Sort -- set the sort order for table widgets and bar charts.

Limit -- restrict the number of data points shown (e.g., top 10 products by revenue).

Appearance Tab

Customize how the widget looks.

Title -- the text shown above the widget. Leave blank for no title.

Color Palette -- choose from 8 preset palettes or set custom colors for each data series. Available palettes: - Default Blue - Warm Tones - Cool Tones - Earth Tones - Vibrant - Pastel - Monochrome - High Contrast

Chart Options (varies by widget type): - Show Legend -- on/off - Legend Position -- top, bottom, left, right - Show Grid Lines -- on/off - Show Data Labels -- display values directly on chart elements - Axis Labels -- custom labels for X and Y axes - Number Format -- decimal places, thousands separator, prefix (e.g., $), suffix (e.g., %) - Animation -- on/off for chart load animations

Metric Widget Specific: - Comparison Period -- show change vs. previous period (day, week, month) - Trend Arrow -- green up / red down indicator - Font Size -- small, medium, large, extra large

Table Widget Specific: - Pagination -- rows per page - Sortable Columns -- on/off - Searchable -- on/off - Column Widths -- auto or manual pixel values - Zebra Striping -- alternating row colors on/off

Interaction Tab

Configure how users can interact with the widget.

Click Action -- what happens when a user clicks a data point: - None -- no action - Filter Dashboard -- clicking a bar/slice filters all other widgets to that value - Open Detail -- clicking opens a detailed view of that data point - Navigate -- clicking navigates to another dashboard or report

Tooltip -- customize what appears when hovering over a data point. You can add extra fields beyond what the chart displays.

Advanced Tab

Settings for power users.

Refresh Interval -- how often the widget re-fetches data while the dashboard is open: - Manual (only refreshes when the page loads) - Every 30 seconds - Every 1 minute - Every 5 minutes - Every 15 minutes - Every 30 minutes

Cache TTL -- how long query results are cached. Shorter TTL means fresher data but more database load. Default: 5 minutes.

Conditional Formatting -- set rules that change colors based on values: - "If revenue > $100,000, show green" - "If error rate > 5%, show red" - Supports up to 5 rules per widget

The Layout Grid

The dashboard canvas uses a 12-column responsive grid.

Grid Mechanics

• Columns: 12 equal-width columns across the full width
• Rows: unlimited, auto-expanding as you add widgets
• Minimum widget size: 2 columns wide, 1 row tall
• Maximum widget size: 12 columns wide (full width), no height limit
• Snap-to-grid: widgets snap to column and row boundaries

Common Layouts

Four metrics across the top: Each metric widget takes 3 columns (3+3+3+3 = 12). Place them in the first row.

Two charts side by side: Each chart takes 6 columns (6+6 = 12). Place them in the same row.

One wide chart, one narrow table: Chart takes 8 columns, table takes 4 columns in the same row.

Full-width chart: Chart takes 12 columns and occupies an entire row.

For detailed layout instructions, see Dashboard Layout: Drag, Drop, Resize, Rearrange.

Responsive Behavior

Dashboards adapt to different screen sizes:

On mobile, chart widgets automatically hide legends and reduce axis labels to fit smaller screens.

Real-Time Data

For dashboards monitoring live data:

1. Set individual widget refresh intervals on the Advanced tab.
2. Data source sync schedules determine how fresh the underlying data is -- a widget can refresh every 30 seconds, but if the source only syncs daily, the data is still only as fresh as the last sync.
3. WebSocket support delivers instant updates when a data source sync completes, so widgets can refresh immediately after new data arrives.

Widget Duplication and Templates

Duplicating a Widget

Right-click a widget (or click the three-dot menu) and select Duplicate. A copy of the widget appears below the original with identical configuration. This is useful when you want multiple similar widgets with small variations (e.g., the same chart filtered to different regions).

Creating a Widget Template

If you find yourself building the same widget configuration repeatedly, save it as a widget template:

1. Configure the widget fully (data source, fields, filters, appearance).
2. Click the three-dot menu and select Save as Widget Template.
3. Name the template (e.g., "Monthly Revenue Line Chart").
4. The template appears in the widget picker under "My Templates" for reuse on any dashboard.

Widget templates save the configuration but not the data source binding -- you choose which source to connect when applying the template.

Dashboard Filters

Dashboard-level filters allow viewers to change the data displayed across all widgets simultaneously without editing individual widget configurations.

Adding a Filter

1. In the builder toolbar, click Add Filter.
2. Choose the filter type:
3. Date Range -- a date picker that overrides each widget's date range
4. Dropdown -- a list of values from a specific column (e.g., region, product, status)

5. Search -- a text input that filters across all widgets

6. Configure which widgets the filter applies to (all by default, or select specific widgets).

7. Click Save.

Filter Behavior for Viewers

When a viewer opens the dashboard:

• Filters appear as controls above the widget grid
• Changing a filter immediately updates all connected widgets
• Filter selections persist during the session but reset when the page is reloaded
• Each filter shows the number of available options and the current selection

This is especially useful for dashboards shared with managers who want to drill into their own team's data without editing the dashboard.

Version History

clariBI tracks changes to dashboards over time:

1. Open the dashboard settings.
2. Click Version History.
3. Browse previous versions with timestamps and the name of the user who made the change.
4. Click Preview to see a read-only view of any previous version.
5. Click Restore to revert the dashboard to a previous state.

Version history retains the last 50 changes. This provides a safety net if someone accidentally deletes widgets or changes the configuration incorrectly.

Dashboard Settings

Click the Settings gear icon in the toolbar to access dashboard-level settings:

• Name and Description -- edit the dashboard title and description
• Workspace -- move the dashboard to a different workspace
• Default Date Range -- set a global date range that applies to all widgets unless overridden
• Auto-Refresh -- enable/disable automatic page refresh for the entire dashboard
• Theme -- light or dark mode for the dashboard
• Set as Default -- make this dashboard the landing page after login
• Clone Dashboard -- create a copy of the entire dashboard (useful for creating a variation for a different team or time period)

Keyboard Shortcuts in the Builder

Templates

If starting from scratch feels overwhelming, use a pre-built template. clariBI includes templates for common use cases. See Dashboard Templates: Finding and Applying Pre-Built Layouts.

Related Articles

• Creating a Dashboard Step by Step
• All 24+ Widget Types: When to Use Each One
• Dashboard Layout: Drag, Drop, Resize, Rearrange
• Sharing Dashboards
• See full documentation