Version: 1.0.0

Price Scale Customization

The Y-axis price scale handles value mapping, grid metrics, and custom annotations.

Price Scale Layout

The price scale occupies the right-hand column of the chart width, allocated by this.paddingRight. The vertical grid calculations map prices to Y-coordinates using visible min/max boundaries:

// Y coordinate mapping function in charting_library.js:
priceToY(p, minPrice, maxPrice) {
  const chartH = this.logicalHeight - this.paddingBottom;
  const ratio = (p - minPrice) / (maxPrice - minPrice);
  return chartH - ratio * chartH;
}

Custom Price Tags

Developers can draw custom markers or level values directly onto the Y-axis using the drawing callback inside series primitives:

// Drawing custom tags on the price scale:
drawPriceScale(ctx, priceScaleW, chartH) {
  const y = this.chart.priceToY(this.price, minPrice, maxPrice);
  const chartW = this.chart.logicalWidth - this.chart.paddingRight;
  
  ctx.fillStyle = this.color;
  ctx.fillRect(chartW + 2, y - 9, priceScaleW - 10, 18); // Draw tag background
  
  ctx.fillStyle = '#ffffff';
  ctx.fillText(this.price.toFixed(2), chartW + priceScaleW / 2, y); // Draw label
}