Dashboard Layout
Customize dashboard layouts and widget positioning
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.
Widget Sizing
Resizing Widgets
Adjust widget dimensions:
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
TeamAvailable 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
Saving Custom Presets
BusinessSave 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
Grouping Related 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
Widget Locking
TeamPrevent 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
Gkey 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:
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.