Two Price Scales
Configure dual-axis layouts tracking two independent series scaled on left and right borders.
Introduction
By default, financial charts draw price coordinates on the right border. However, dual-axis charting is useful when plotting indicators or overlaying secondary assets (e.g. BTCUSD vs S&P500) that use different price ranges.
Enabling Left Price Scale
By default, the left scale is hidden. Enable it by applying configuration parameters:
chart.applyOptions({
leftPriceScale: {
visible: true, // Force left price axis visible
borderVisible: true, // Show divider border
borderColor: 'rgba(255, 255, 255, 0.12)'
}
});Mapping Series to Scales
When adding a series, configure the Y-axis targeting mapping using priceScaleId:
// 1. Candlestick series mapped on the right price scale
const rightSeries = chart.addCandlestickSeries({
priceScaleId: 'right'
});
// 2. Line indicator overlay mapped on the left price scale
const leftSeries = chart.addLineSeries({
priceScaleId: 'left',
color: '#9c27b0',
lineWidth: 2
});Options Reference
The chart layout engine aligns each series horizontally, but scales their wicks vertically based on separate Y-axis price scaling factors. This ensures comparative visual trend analysis without distortions.