Skip to main content

Scaling

Scaling adjusts the visible chart range along the X and Y axes.

User interactions​

You can scale the chart in several ways:

  • Drag the axis: Click and drag the X or Y axis.

Scale by axis


- Scroll to zoom: Use the mouse scroll wheel.


Scale by mouse scroll with X


- Scale both axes: Enable lockPriceToBarRatio to zoom X and Y simultaneously.


Scale by by mouse scroll with X and Y

Panning​

Panning shifts the chart horizontally or vertically.

Press and hold the left mouse button, then drag the chart:

Scale by by mouse scroll with X and Y

Scale History

chart's ScaleModel has a public history property, which is used to store history of applied scales.

This store is stack-like data structure and the elements are ScaleHistoryItem's.

export interface ScaleHistoryItem {
    xStart: Unit;
    xEnd: Unit;
    yStart: Unit;
    yEnd: Unit;
}

Use the following methods from ScaleModel to access and manipulate scale history:

export class ScaleModel {
    // removes from the stack the last ScaleHistoryItem
    public popFromHistory(): ScaleHistoryItem | undefined {
        return;
    }
    // pushes to the stack new ScaleHistoryItem
    public pushToHistory(item: ScaleHistoryItem): void {}
    // removes all the elements from the history
    public clearHistory(): void {}
}

Example​

export function scaleHistoryExample(scale: ScaleModel) {
    const historyItem = scale.popFromHistory();
    if (historyItem) {
        scale.pushToHistory(historyItem);
        scale.clearHistory();
    }
}

Configuration options​

Disable auto-scale on drag​

To disable auto-scaling during long vertical drags using the AutoScaleDisableOnDrag interface:

export interface AutoScaleDisableOnDrag {
    enabled: boolean;
    /**
     * The angle of mouse movement. Default - Math.PI / 9.
     */
    edgeAngle: number;
    /**
     * Distance that mouse should travel vertically in px. Default - 80.
     */
    yDiff: number;
}

Behavior​

The ChartAreaPanHandler disables auto-scaling if all of the following conditions are true:

  1. AutoScaleDisableOnDrag.enabled === true
  2. AutoScaleDisableOnDrag.edgeAngle > α
  3. AutoScaleDisableOnDrag.yDiff > AB length
Horizontal Ray styled example

Candles viewport​

You can control how many candles are displayed using the viewportStrategy option in ChartConfig.

Available strategies:

  • timeframe: Preserve the selected timeframe
  • candles: Maintain a fixed number of candles
  • basic: Use default scaling behavior

Chart scale configuration​

React viewport configuration​