Version: 1.0.0

Price scale

The price scale (or price axis) is a vertical scale that maps prices to coordinates and vice versa. The conversion rules depend on the price scale mode, the chart's height, and the visible part of the data.

Under the Hood: Coordinate Mapping

At its mathematical core, Backtestx Charts translates numerical price bounds linearly to canvas pixel offsets. This coordinate conversion layer is encapsulated in window.DecodedScale (compiled from decoded.js) and is exposed via methods on the main chart widget.

Price-to-Y Coordinate (`priceToY`)

Converts a target price value to a vertical pixel coordinate on the canvas. Since canvas pixels start from 0 at the top and increase downward, the formula subtracts the scaled ratio from the total height:

y = chartH - ((price - minPrice) / (maxPrice - minPrice)) * chartH

Y-Coordinate-to-Price (`yToPrice`)

Converts a vertical pixel coordinate back to a numeric price. Essential for crosshair cursor snapping and placing coordinate-based drawing tools:

price = maxPrice - (y / chartH) * (maxPrice - minPrice)

Dynamic Auto-Scaling

Whenever a user scrolls horizontally, the chart calculates the visible data boundaries dynamically via window.DecodedScale.getVisibleMinMax(chart):

Visible Scope Scrapes: Iterates over current visible bar slots (from startIndex to endIndex) and tracks high/low values.
Fallback Mappings: For non-OHLC series objects, the scale engine automatically scrapes values from alternative attributes (yield, price, or y).
Interactive Offsets: Incorporates zoom factor scaling (priceScaleZoom) and vertical translation dragging offset (priceScaleOffset) when dragging the Y-axis.

Live Price Levels & Drawing Badges

Backtestx Charts uses secondary rendering modules to draw indicators directly on the Y-axis:

1. Live Price Line & Label

Configured in price-scale-label.js, this renderer draws a dotted horizontal line across the main viewport representing the latest close price, alongside a dynamic colored pill label on the vertical axis (green for upward price movements, red for downward).

2. Selected Drawing Anchor Labels

Managed in price-scale-drawing-label.js, this component renders color-coded indicator badges on the price axis corresponding to the vertical coordinates of the active drawing's anchor points (like Trend Lines or Fibonacci levels).

Interactive Controls

Users can interact with the price scale directly inside the charting pane:

Drag Vertical Scale

Click and drag vertically directly inside the Y-axis price scale area to stretch or compress the chart's vertical grid boundaries.

Double Click Reset

Double-click anywhere inside the Y-axis price scale boundaries to instantly reset zoom factors and center alignments back to the default auto-scaled levels.