Keyboard & Mouse Shortcuts

Quick Reference

Master VibeTrader’s interface with these keyboard shortcuts and mouse controls for efficient chart navigation and technical analysis.

Symbol & Timeframe Selection

Select Symbol

Click on symbol - Open symbol selector and switch to a different trading instrument

Select Timeframe

Click on timeframe - Change chart timeframe (1m, 5m, 1h, 1D, etc.)

Mouse Controls

Moving
Scaling
Reference Cursor

Drag

Mouse

Click and drag anywhere on the chart to move horizontally through time.Use case: Scroll through historical data without changing zoom level

Wheel

Mouse

Scroll the mouse wheel to move the chart left or right.Speed: 1 bar per increment (or 16.8% of visible bars when Space is held)

Ctrl + Drag

Mouse + Keyboard

Hold Ctrl and drag to scale the chart horizontally.Effect: Changes the number of visible bars and bar width dynamically

Shift + Wheel

Mouse + Keyboard

Hold Shift and scroll the mouse wheel to zoom in/out.Effect: Cycles through predefined bar width levels (0.00025px to 20px)

Double Click (Chart)

Mouse

Double-click anywhere on the chart to place a reference cursor.Purpose: Mark a specific time/price point for analysis

Double Click (Y-axis)

Mouse

Double-click on the Y-axis to remove the reference cursor.Alternative: Press ESC key

Keyboard Controls

Arrow Keys - Navigation

Left/Right Arrow

Keyboard

Move the chart left or right by 1 bar (or 16.8% of visible bars when Space is held)

Left Arrow  → Move chart left (view older data)
Right Arrow → Move chart right (view newer data)

Up/Down Arrow

Keyboard

Zoom in/out by changing bar width through predefined levels

Up Arrow   → Zoom in (increase bar width)
Down Arrow → Zoom out (decrease bar width)

Ctrl + Arrows - Reference Cursor

Ctrl + Left Arrow

Keyboard

Move reference cursor one bar to the left

Ctrl + Right Arrow

Keyboard

Move reference cursor one bar to the right

The chart automatically scrolls when the reference cursor approaches the edges, maintaining at least 1 bar padding on each side.

Space - Speed Toggle

Space

Keyboard

Toggle between normal and fast movement speedNormal speed: 1 bar per incrementFast speed: 16.8% of visible bars per increment (Math.floor(nBars * 0.168))

Hold Space while using arrow keys or mouse wheel for rapid navigation through long time periods.

ESC - Cancel/Hide

ESC

Keyboard

Multi-purpose cancel key with context-aware behavior:

Remove reference cursor (if active)
Unselect drawing (if a drawing is selected)
Hide crosshair (if visible)

Drawing Tools

Mouse Controls

Selection
Creation
Editing

Click on Drawing

Mouse

Select a drawing to display its handles and enable editing mode.Visual feedback: Drawing is highlighted and handles (anchor points) appear

Keyboard Controls

ESC - Unselect

Unselect the currently selected drawing.Effect: Handles disappear, drawing returns to normal state

DELETE - Remove

Delete the currently selected drawing.Warning: This action is immediate and cannot be undone!

Complete Shortcut Matrix

Mouse Shortcuts

╔══════════════════════════════╦═══════════════════════════════════════╗
║ Action                       ║ Description                           ║
╠══════════════════════════════╬═══════════════════════════════════════╣
║ Drag                         ║ Move chart horizontally               ║
║ Wheel                        ║ Scroll chart left/right               ║
║ Shift + Wheel                ║ Zoom in/out                           ║
║ Ctrl + Drag                  ║ Scale chart                           ║
║ Double Click (Chart)         ║ Place reference cursor                ║
║ Double Click (Y-axis)        ║ Remove reference cursor               ║
║ Click (Drawing)              ║ Select drawing                        ║
║ Ctrl + Click                 ║ Complete variable-handle drawing      ║
║ Ctrl + Click (Handle)        ║ Remove handle                         ║
║ Ctrl + Drag (Segment)        ║ Insert handle                         ║
╚══════════════════════════════╩═══════════════════════════════════════╝

Keyboard Shortcuts

╔══════════════════════════════╦═══════════════════════════════════════╗
║ Key                          ║ Action                                ║
╠══════════════════════════════╬═══════════════════════════════════════╣
║ Left Arrow                   ║ Move chart left                       ║
║ Right Arrow                  ║ Move chart right                      ║
║ Up Arrow                     ║ Zoom in                               ║
║ Down Arrow                   ║ Zoom out                              ║
║ Ctrl + Left Arrow            ║ Move reference cursor left            ║
║ Ctrl + Right Arrow           ║ Move reference cursor right           ║
║ Space                        ║ Toggle fast/normal movement speed     ║
║ ESC                          ║ Remove cursor / Unselect / Hide       ║
║ DELETE                       ║ Delete selected drawing               ║
╚══════════════════════════════╩═══════════════════════════════════════╝

Advanced Usage Patterns

Efficient Chart Analysis Workflow

Quick Navigation

Use Shift + Wheel to quickly zoom out and see the big picture, then zoom in on areas of interest.

Precise Analysis

Double-click to place a reference cursor on a key price level, then use Ctrl + Arrow Keys to step through time while keeping that level marked.

Pattern Drawing

Select a drawing tool, click to place points, use Ctrl + Drag to add intermediate points (polyline), and press ESC when done to deselect.

Comparison

Hold Space and use Left/Right Arrows to rapidly scan through historical patterns for comparison.

Speed Modifiers

Normal Speed (Default):

Arrow keys: 1 bar
Mouse wheel: 1 bar
Reference cursor: 1 bar

Fast Speed (Space held):

Arrow keys: Math.floor(nBars × 0.168) bars
Mouse wheel: Math.floor(nBars × 0.168) bars
Reference cursor: 1 bar (not affected)

Example: If 100 bars are visible, fast speed moves 16 bars per increment.

Zoom Levels (Bar Width)

Level  Width (px)  Use Case
─────  ──────────  ────────────────────────────────
  0.00025     Ultra-compressed, years of data
  0.0005      Very compressed
  0.001       Compressed
  0.025       Moderate compression
  0.05        Slight compression
  0.1         Compact
  0.25        Normal (wide view)
  0.5         Normal
  1.0         Normal (narrow view)
  2.0         Comfortable
  4.0         Spacious
  6.0         Default
  8.0         Large
 10.0         Extra large
 20.0         Maximum detail

Use Up/Down Arrow to cycle through these zoom levels. The chart remembers your preferred zoom level for each timeframe.

Context-Aware Controls

Many controls have different behaviors depending on context:

ESC Key Behavior

If drawing is selected     → Unselect drawing
If reference cursor active → Remove reference cursor
If crosshair visible       → Hide crosshair

Mouse Drag Behavior

Normal Drag           → Move chart horizontally
Ctrl + Drag          → Scale chart
Drag on Drawing      → Move drawing
Ctrl + Drag (Segment) → Insert handle (polyline only)

Tips & Tricks

Fast Time Travel

Hold Space + Right Arrow repeatedly to quickly jump forward through time. Release Space for fine adjustments.

Precision Placement

Zoom in (Up Arrow) before placing drawing handles for pixel-perfect alignment with price levels.

Reference Cursor Navigation

Drawing Cleanup

After completing a drawing, press ESC to deselect it immediately. This keeps your chart clean and prevents accidental modifications.

Multi-Timeframe Analysis

Click timeframe → analyze → click another timeframe. Your zoom level and position reset for each timeframe automatically.

Accessibility

VibeTrader supports keyboard-only navigation:

All chart navigation can be performed without a mouse using arrow keys
Reference cursor can be placed and moved with keyboard only (via code integration)
Drawings require mouse for initial placement, but can be selected and deleted with keyboard

For users who prefer keyboard-only workflows, consider using the reference cursor as your primary navigation tool.

Customization

While the shortcuts are currently hardcoded, the architecture supports customization:

// Current implementation in ChartXControl.ts
REF_PADDING_RIGHT = 1  // Bars of padding when cursor near edge
REF_PADDING_LEFT = 1

// Fast movement percentage
isCursorAccelerated ? Math.floor(this.nBars * 0.168) : 1

Developers can modify these constants to adjust navigation behavior and padding preferences.

Using VibeTrader

Keyboard & Mouse Shortcuts

Quick Reference

Symbol & Timeframe Selection

Select Symbol

Select Timeframe

Chart Navigation

Mouse Controls

Keyboard Controls

Drawing Tools

Mouse Controls

Keyboard Controls

ESC - Unselect

DELETE - Remove

Complete Shortcut Matrix

Mouse Shortcuts

Keyboard Shortcuts

Advanced Usage Patterns

Efficient Chart Analysis Workflow

Speed Modifiers

Zoom Levels (Bar Width)

Context-Aware Controls

ESC Key Behavior

Mouse Drag Behavior

Tips & Tricks

Accessibility

Customization

Build docs developers (and LLMs) love

Using VibeTrader

​Quick Reference

​Symbol & Timeframe Selection

Select Symbol

Select Timeframe

​Chart Navigation

​Mouse Controls

​Keyboard Controls

​Drawing Tools

​Mouse Controls

​Keyboard Controls

ESC - Unselect

DELETE - Remove

​Complete Shortcut Matrix

​Mouse Shortcuts

​Keyboard Shortcuts

​Advanced Usage Patterns

​Efficient Chart Analysis Workflow

​Speed Modifiers

​Zoom Levels (Bar Width)

​Context-Aware Controls

​ESC Key Behavior

​Mouse Drag Behavior

​Tips & Tricks

​Accessibility

​Customization

Build docs developers (and LLMs) love

Quick Reference

Symbol & Timeframe Selection

Chart Navigation

Mouse Controls

Keyboard Controls

Drawing Tools

Mouse Controls

Keyboard Controls

Complete Shortcut Matrix

Mouse Shortcuts

Keyboard Shortcuts

Advanced Usage Patterns

Efficient Chart Analysis Workflow

Speed Modifiers

Zoom Levels (Bar Width)

Context-Aware Controls

ESC Key Behavior

Mouse Drag Behavior

Tips & Tricks

Accessibility

Customization