Navigating the Interface
ChartLabs uses a professional docking panel layout. Every component can be rearranged, resized, tabbed, and popped out into separate windows.
Layout Structure
+--------------------------------------------------+
| Workspaces Toolbar |
+------+-----------------------------------+-------+
| | | |
| Side | Main Chart Area | Nav |
| bar | (Docking Layout) | Panel |
| | | |
| | | |
+------+-----------------------------------+-------+
| Bottom Panel (CodeLab) |
+--------------------------------------------------+Sidebar (Left)
The left sidebar provides quick access to all platform modules:
| Icon | Module | Description |
|---|---|---|
| Chart | Chart | Add a new chart tab |
| List | Watchlist | Open the watchlist panel |
| Search | Screener | Open the instrument screener |
| Newspaper | News | Open the news feed |
| Bell | Alerts | Open the alerts manager |
| Trending | Trading | Open the trading hub |
| Brain | AI Analyst | Open the AI analysis panel |
| Code | CodeLab | Toggle the script editor (bottom panel) |
Main Chart Area
The central area uses a docking layout for multi-panel charting:
- Tabs -- Multiple charts in a single panel
- Split panels -- Drag a tab to the edge of a panel to create horizontal or vertical splits
- Pop-out windows -- Right-click a tab and select "Pop Out" to detach it to a separate browser window
- Drag and drop -- Reorder tabs by dragging them within or between panels
Navigation Panel (Right)
The right panel hosts the currently active module (Watchlist, News, Alerts, Trading Hub, AI Analyst, or Screener):
- Opens when you click a sidebar icon
- Resizable by dragging the split gutter
- Collapses when no module is active
Bottom Panel
The bottom panel hosts CodeLab (the script editor) when active. Toggle it from the sidebar.
Workspaces Toolbar
The top toolbar shows the current workspace name and provides controls to save, load, rename, and delete workspaces.
Responsive Design
ChartLabs detects screen size and adapts:
- Desktop (above 767px) -- Full docking layout with splits, pop-outs, and resizable panels
- Mobile (below 767px) -- Simplified tab-based navigation optimized for touch