Skip to main content

​
Overview

VibeTrader provides a comprehensive set of drawing tools for technical analysis. All drawing tools share a common interaction model based on handles (anchor points) that you place and manipulate on the chart.

​
Available Drawing Tools

Line

Simple line tool for drawing trend lines between two points.

Parallel Lines

Draw parallel channel lines for identifying support and resistance zones.

Polyline

Multi-segment line with variable number of handles for complex patterns.

Fibonacci Retracement

Standard Fibonacci retracement levels (23.6%, 38.2%, 50%, 61.8%, etc.).

Fibonacci Retrace Vertical

Vertical Fibonacci retracement for time-based analysis.

Fibonacci Time Zone

Fibonacci time zones for identifying potential reversal times.

Gann Angles

Gann fan with multiple angle lines (1x1, 1x2, 2x1, 1x3, 3x1, etc.).

​
Drawing Tool Usage

​
Creating Drawings

1

Select Drawing Tool

Choose your desired drawing tool from the toolbar. The tool ID format is used internally:
  • line - Line drawing
  • parallel - Parallel lines
  • polyline - Polyline
  • fibonacci_retrace - Fibonacci retracement
  • fibonacci_retrace_v - Vertical Fibonacci
  • fibonacci_timezone - Fibonacci time zones
  • gann_angles - Gann angles
2

Place Anchor Points

Click on the chart to place anchor points (handles). Most tools require 2 handles, except polyline which supports unlimited handles.
3

Complete Drawing

For fixed-handle drawings (2 handles), the drawing completes automatically after placing the second point.For variable-handle drawings (polyline), press Ctrl + Click to complete the drawing.

​
Mouse Controls

Select a drawing to display its handles and enable editing.
Complete a variable-handle drawing like polyline when you’re done adding points.
Remove a specific handle from a variable-handle drawing.
Insert a new handle at the cursor position on a polyline segment.
Click and drag a selected drawing to move it to a different position on the chart while maintaining its shape.

​
Keyboard Controls

ESC

Unselect the currently selected drawing.

DELETE

Delete the currently selected drawing.

​
Fibonacci Retracement

Fibonacci Retracement The Fibonacci retracement tool displays the following levels: 
const FN = [
    0,       // 0%
    0.236,   // 23.6%
    0.382,   // 38.2%
    0.500,   // 50%
    0.618,   // 61.8% (Golden Ratio)
    0.763,   // 76.3%
    1,       // 100%
    1.618,   // 161.8% (Extension)
    2.0,     // 200%
    2.618,   // 261.8%
    3.0,     // 300%
    4.237,   // 423.7%
]

​
How to Use

  1. Identify Trend: Find a significant price move (swing high to swing low, or vice versa)
  2. Place First Handle: Click at the start of the move
  3. Place Second Handle: Click at the end of the move
  4. Analyze Levels: The tool automatically draws horizontal lines at each Fibonacci level with percentage labels
Fibonacci levels automatically stop rendering when they exceed the visible chart area to maintain performance.

​
Gann Angles

Gann angles help identify potential support and resistance based on geometric relationships.

​
Angle Multiples

The Gann tool draws angles at these multiples of the base angle:
  • 1x1: Main diagonal (45-degree equivalent in price/time space)
  • 1x2: Half the slope of 1x1
  • 2x1: Double the slope of 1x1
  • 1x3: One-third the slope
  • 3x1: Triple the slope

​
Frame Structure

The Gann tool also draws:
  • Diagonal lines connecting opposite corners
  • Horizontal lines at top and bottom
  • Vertical lines at left and right
Gann angles are drawn in all four quadrants from the anchor point, providing a complete fan of angles for analysis.

​
Polyline Tool

The polyline is a special variable-handle drawing tool:

​
Features

  • Unlimited Points: Add as many anchor points as needed
  • Dynamic Editing: Insert handles by Ctrl + Drag on segments
  • Handle Removal: Ctrl + Click on handles to remove them
  • Flexible Completion: Ctrl + Click to complete when done

​
Use Cases

Complex Patterns

Draw head and shoulders, triangles, or other complex chart patterns.

Trend Channels

Outline multi-touch trend channels with precision.

​
Drawing State System

Each drawing has several states:
1

In Drawing

The drawing is being created. User is placing handles.
2

Anchored

A handle has been placed and locked in position.
3

Completed

All required handles are placed. The drawing is finalized.
4

Selected

The drawing is selected for editing or deletion. Handles are visible.

​
Handle System

Handles are the anchor points of drawings:

​
Handle Properties

type TPoint = {
    time: number,   // Timestamp of the handle
    value: number   // Price/value of the handle
}

​
Visual Representation

  • Handles appear as circles with 5-pixel radius
  • Hit detection uses 8-pixel radius for easier clicking
  • Handles are only visible when a drawing is selected

​
Handle Manipulation

// While creating a drawing, the current handle follows the cursor
stretchCurrentHandle(point: TPoint)

​
Hit Testing

Each drawing tool implements custom hit detection:
  • Lines: 4-pixel distance threshold from the line
  • Fibonacci: 4-pixel vertical distance from each level line
  • Gann: 4-pixel distance from any angle line or frame element
Hit testing ensures you can easily select drawings even with small or diagonal elements.

​
Coordinate System Integration

Drawings integrate with the chart coordinate system: 
// Convert handle point to screen coordinates
const x = xControl.xb(xControl.bt(handle.point.time))
const y = yControl.yv(handle.point.value)

// Convert screen coordinates back to point
const time = xControl.tx(x)
const value = yControl.vy(y)

​
Time-Based vs Bar-Based

When dragging drawings, the system uses bar-based movement rather than time-based. This ensures drawings stay aligned with bars even in “trading date mode” where some calendar times may not have corresponding bars.

​
Rendering System

Drawings render as SVG elements: 
// Unselected drawings render without handles
renderDrawing(key: Key)

​
CSS Classes

  • .drawing - Normal drawing state
  • .drawing-highlight - Selected drawing (highlighted)
  • .drawing-handle - Handle circles
  • .drawing-stretching - Drawing being stretched
  • .drawing-moving - Drawing being dragged

​
Best Practices

Zoom in before placing handles for precise alignment with specific price levels or time points.
Use ESC to deselect drawings after creation to keep the chart clean.
Avoid creating excessive drawings on a single chart. Remove outdated analysis to maintain performance.
Use different drawing types for different purposes (e.g., Fibonacci for retracements, lines for trends).

​
Technical Implementation

All drawings extend the base Drawing class: 
abstract class Drawing {
    abstract init(): void
    abstract plotDrawing(): Seg[]
    abstract hits(x: number, y: number): boolean
    
    // Common methods
    anchorHandle(point: TPoint): boolean
    stretchCurrentHandle(point: TPoint)
    dragDrawing(point: TPoint)
    renderDrawing(key: Key)
    renderDrawingWithHandles(key: Key)
}
Developers can create custom drawing tools by extending the Drawing class and implementing the three abstract methods.

Build docs developers (and LLMs) love

Get started for freeTalk to us