Exciting Update: Version 1.0.0 is now available, introducing high-performance technical indicators and custom drawing tools. Read more
Version: 1.0.0

Time Scale Customization

The timescale (X-axis) controls tick rendering, coordinate calculations, and supports multiple horizontal coordinate scales.

Time Scale Overview

The X-axis timescale renders at the bottom of the chart viewport (positioned at logicalHeight - paddingBottom). It draws time markers, interval indicators, and snaps lines to specific indexes.

Coordinate Conversions

Converting indexes to coordinate pixels is handled by the scale delegate:

// Coordinate mapping
const x = chart.barToX(i); // Returns the center X pixel for bar index 'i'
const i = chart.xToBar(x); // Returns the closest bar index for pixel X

Custom Scales

The library features three built-in timescale layout configurations. Developers can set this via the horizontalScale options attribute:

"time"

Standard financial chart showing dates/times.

"yield-curve"

Plots interest rates against bond maturities (e.g. 1M, 1Y, 10Y).

"strike-price"

Plots option prices or metrics against strike levels.