Dashboard Layout

Master dashboard layout to create organized, responsive visualizations that adapt to any screen size.

Overview

MongoDash uses a flexible grid-based layout system that lets you arrange widgets through drag-and-drop while maintaining responsive behavior across devices.

Grid System

Layout Grid

Dashboards use a 12-column grid system:

Desktop - 12 columns, each widget spans 1-12 columns
Tablet - 8 columns, auto-adjusted from desktop layout
Mobile - 4 columns, widgets stack vertically

Grid Spacing

Gutter - 16px between widgets
Margin - 24px around dashboard edges
Row Height - 80px base unit for vertical sizing

Widgets snap to grid boundaries automatically, ensuring clean alignment without manual pixel adjustments.

Positioning Widgets

Drag and Drop

Enter Edit Mode - Click Edit Layout button in dashboard header

Drag Widget - Click and hold widget header, drag to new position

Drop to Place - Release mouse when outline shows desired location

Save Changes - Click Save Layout to persist changes

Positioning Behavior

Widgets automatically reflow when moved:

Widgets below shift down to accommodate moved items
Empty spaces are filled intelligently
Overlapping widgets push others down
Grid alignment is maintained automatically

Unsaved layout changes are lost when navigating away. Always click Save Layout before leaving.

Resizing Widgets

Adjust widget dimensions:

Enter Edit Mode - Enable layout editing

Select Widget - Click widget to show resize handles

Drag Corner - Drag bottom-right handle to resize

Release - Widget snaps to nearest grid cell

Size Constraints

Each widget type has minimum and maximum sizes:

KPI Widget - Min 2x2, Max 4x3 grid cells
Chart Widget - Min 4x3, Max 12x6 grid cells
Table Widget - Min 4x4, Max 12x8 grid cells
Text Widget - Min 2x2, Max 12x4 grid cells

Recommended Sizes

Optimal widget sizes for readability:

Single KPI - 3 columns x 2 rows
Line Chart - 6 columns x 4 rows
Bar Chart - 4 columns x 3 rows
Data Table - 12 columns x 6 rows

Responsive Layouts

Automatic Breakpoints

Layouts adapt automatically:

Desktop (1200px+) - Full 12-column layout
Tablet (768-1200px) - 8-column layout, widgets scale proportionally
Mobile (below 768px) - Single column, widgets stack by dashboard order

Mobile Optimization

Preview Mobile - Click device icon to preview mobile layout

Reorder Widgets - Drag to adjust mobile stacking order

Hide Widgets - Toggle widget visibility per device type

Place most important metrics first. They'll appear at top on mobile devices.

Layout Presets

Team

Available Presets

Start with pre-configured layouts:

Executive Summary - 4 KPIs across top, 2 charts below
Analytics Grid - 3x3 grid of evenly-sized widgets
Focus + Detail - Large primary chart, supporting metrics sidebar
Triple Column - Three vertical columns of stacked widgets
Sidebar Layout - Wide main area with narrow right sidebar

Applying Presets

Click Layout dropdown in dashboard header

Select preset template

Review applied layout

Customize widget positions as needed

Saving Custom Presets

Business

Save your layouts as reusable templates:

Configure dashboard layout
Click Save as Template
Name your preset
Apply to other dashboards

Layout Best Practices

Visual Hierarchy

Create scannable dashboards:

Top Row - Most critical KPIs and metrics
Middle Section - Trend charts and detailed visualizations
Bottom Area - Supporting tables and supplementary data

Organize widgets logically:

Group related metrics together
Use consistent sizing for similar widget types
Create visual sections with alignment
Leave whitespace between unrelated groups

Align widget edges to create invisible columns and rows. This visual structure helps users scan efficiently.

Performance Considerations

Layout impacts load time:

Limit Widgets - Keep to 12-15 widgets per dashboard
Lazy Loading - Widgets below fold load only when scrolled into view
Size Appropriately - Larger widgets require more rendering resources

Advanced Layout Features

Team

Prevent accidental changes:

Right-click widget
Select Lock Position
Widget cannot be moved or resized
Unlock to enable editing again

Layout Grid Overlays

Toggle grid visualization:

Press G key to show/hide grid overlay
Shows column divisions and row heights
Useful for precise alignment
Only visible in edit mode

Snap Settings

Customize snap behavior:

Snap to Grid - Default, aligns to grid cells
Snap to Widgets - Aligns edges with nearby widgets
Free Positioning - Disable all snapping (not recommended)

Copying Layouts

Duplicate Dashboard Layout

Copy layout to new dashboard:

Open source dashboard

Click Dashboard Menu → Copy Layout

Select target dashboard

Click Apply Layout

Widget positions copy, but data sources remain unchanged.

Troubleshooting Layout Issues

Widgets Overlapping

If widgets overlap incorrectly:

Click Reset Layout in edit mode
Widgets auto-arrange in grid order
Manually adjust positions
Save corrected layout

Responsive Issues

If mobile layout breaks:

Check widget minimum sizes
Verify mobile preview before saving
Use mobile-specific visibility settings
Consider creating separate mobile dashboard

Very wide widgets (10+ columns) may cause horizontal scrolling on tablets. Limit max width to 8 columns for tablet compatibility.

What's Next?

Dashboard Layout

Master dashboard layout to create organized, responsive visualizations that adapt to any screen size.

Overview

MongoDash uses a flexible grid-based layout system that lets you arrange widgets through drag-and-drop while maintaining responsive behavior across devices.

Grid System

Layout Grid

Dashboards use a 12-column grid system:

Desktop - 12 columns, each widget spans 1-12 columns
Tablet - 8 columns, auto-adjusted from desktop layout
Mobile - 4 columns, widgets stack vertically

Grid Spacing

Gutter - 16px between widgets
Margin - 24px around dashboard edges
Row Height - 80px base unit for vertical sizing

Widgets snap to grid boundaries automatically, ensuring clean alignment without manual pixel adjustments.

Positioning Widgets

Drag and Drop

Enter Edit Mode - Click Edit Layout button in dashboard header

Drag Widget - Click and hold widget header, drag to new position

Drop to Place - Release mouse when outline shows desired location

Save Changes - Click Save Layout to persist changes

Positioning Behavior

Widgets automatically reflow when moved:

Widgets below shift down to accommodate moved items
Empty spaces are filled intelligently
Overlapping widgets push others down
Grid alignment is maintained automatically

Unsaved layout changes are lost when navigating away. Always click Save Layout before leaving.

Resizing Widgets

Adjust widget dimensions:

Enter Edit Mode - Enable layout editing

Select Widget - Click widget to show resize handles

Drag Corner - Drag bottom-right handle to resize

Release - Widget snaps to nearest grid cell

Size Constraints

Each widget type has minimum and maximum sizes:

KPI Widget - Min 2x2, Max 4x3 grid cells
Chart Widget - Min 4x3, Max 12x6 grid cells
Table Widget - Min 4x4, Max 12x8 grid cells
Text Widget - Min 2x2, Max 12x4 grid cells

Recommended Sizes

Optimal widget sizes for readability:

Single KPI - 3 columns x 2 rows
Line Chart - 6 columns x 4 rows
Bar Chart - 4 columns x 3 rows
Data Table - 12 columns x 6 rows

Responsive Layouts

Automatic Breakpoints

Layouts adapt automatically:

Desktop (1200px+) - Full 12-column layout
Tablet (768-1200px) - 8-column layout, widgets scale proportionally
Mobile (below 768px) - Single column, widgets stack by dashboard order

Mobile Optimization

Preview Mobile - Click device icon to preview mobile layout

Reorder Widgets - Drag to adjust mobile stacking order

Hide Widgets - Toggle widget visibility per device type

Place most important metrics first. They'll appear at top on mobile devices.

Layout Presets

Team

Available Presets

Start with pre-configured layouts:

Executive Summary - 4 KPIs across top, 2 charts below
Analytics Grid - 3x3 grid of evenly-sized widgets
Focus + Detail - Large primary chart, supporting metrics sidebar
Triple Column - Three vertical columns of stacked widgets
Sidebar Layout - Wide main area with narrow right sidebar

Applying Presets

Click Layout dropdown in dashboard header

Select preset template

Review applied layout

Customize widget positions as needed

Saving Custom Presets

Business

Save your layouts as reusable templates:

Configure dashboard layout
Click Save as Template
Name your preset
Apply to other dashboards

Layout Best Practices

Visual Hierarchy

Create scannable dashboards:

Top Row - Most critical KPIs and metrics
Middle Section - Trend charts and detailed visualizations
Bottom Area - Supporting tables and supplementary data

Organize widgets logically:

Group related metrics together
Use consistent sizing for similar widget types
Create visual sections with alignment
Leave whitespace between unrelated groups

Align widget edges to create invisible columns and rows. This visual structure helps users scan efficiently.

Performance Considerations

Layout impacts load time:

Limit Widgets - Keep to 12-15 widgets per dashboard
Lazy Loading - Widgets below fold load only when scrolled into view
Size Appropriately - Larger widgets require more rendering resources

Advanced Layout Features

Team

Prevent accidental changes:

Right-click widget
Select Lock Position
Widget cannot be moved or resized
Unlock to enable editing again

Layout Grid Overlays

Toggle grid visualization:

Press G key to show/hide grid overlay
Shows column divisions and row heights
Useful for precise alignment
Only visible in edit mode

Snap Settings

Customize snap behavior:

Snap to Grid - Default, aligns to grid cells
Snap to Widgets - Aligns edges with nearby widgets
Free Positioning - Disable all snapping (not recommended)

Copying Layouts

Duplicate Dashboard Layout

Copy layout to new dashboard:

Open source dashboard

Click Dashboard Menu → Copy Layout

Select target dashboard

Click Apply Layout

Widget positions copy, but data sources remain unchanged.

Troubleshooting Layout Issues

Widgets Overlapping

If widgets overlap incorrectly:

Click Reset Layout in edit mode
Widgets auto-arrange in grid order
Manually adjust positions
Save corrected layout

Responsive Issues

If mobile layout breaks:

Check widget minimum sizes
Verify mobile preview before saving
Use mobile-specific visibility settings
Consider creating separate mobile dashboard

Very wide widgets (10+ columns) may cause horizontal scrolling on tablets. Limit max width to 8 columns for tablet compatibility.

Dashboard Layout

Dashboard Layout

Overview

Grid System

Layout Grid

Grid Spacing

Positioning Widgets

Drag and Drop

Positioning Behavior

Widget Sizing

Resizing Widgets

Size Constraints

Recommended Sizes

Responsive Layouts

Automatic Breakpoints

Mobile Optimization

Layout Presets

Available Presets

Applying Presets

Saving Custom Presets

Layout Best Practices

Visual Hierarchy

Grouping Related Data

Performance Considerations

Advanced Layout Features

Widget Locking

Layout Grid Overlays

Snap Settings

Copying Layouts

Duplicate Dashboard Layout

Troubleshooting Layout Issues

Widgets Overlapping

Responsive Issues

What's Next?

On this page

Dashboard Layout

Dashboard Layout

Overview

Grid System

Layout Grid

Grid Spacing

Positioning Widgets

Drag and Drop

Positioning Behavior

Widget Sizing

Resizing Widgets

Size Constraints

Recommended Sizes

Responsive Layouts

Automatic Breakpoints

Mobile Optimization

Layout Presets

Available Presets

Applying Presets

Saving Custom Presets

Layout Best Practices

Visual Hierarchy

Grouping Related Data

Performance Considerations

Advanced Layout Features

Widget Locking

Layout Grid Overlays

Snap Settings

Copying Layouts

Duplicate Dashboard Layout

Troubleshooting Layout Issues

Widgets Overlapping

Responsive Issues

What's Next?

On this page