Skip to main content

Price Line

The Price Line drawing tool creates horizontal lines at specific price levels to indicate support/resistance levels, pivot points, or other important price references. Unlike the Order Line, Price Lines are simple horizontal references without trading-specific functionality.

Key Features​

  • Horizontal lines spanning the full chart width at specified price levels
  • Customizable styling (color, width, dash pattern)
  • Fixed positioning relative to price values during pan/zoom
  • Interactive movement by dragging up/down
  • Integration with price scale for accurate positioning
  • Performance optimized for multiple price lines

API Usage​

Price Lines are created using the horizontal line drawing system. While the documentation references chart.createPriceLine(options), the actual implementation uses chart.createHorizontalLine(options):

// Create a price line at a specific price level
const priceLine = await chart.createHorizontalLine();

// Configure price line properties
priceLine.setPrice(150.00);
priceLine.setColor("#ff9800");
priceLine.setLineWidth(2);
priceLine.setLineDash([4, 4]);
priceLine.setText("Resistance Level");

Configuration Options​

OptionTypeDefaultDescription
pricenumberRequiredPrice level where the line will be drawn
colorstring"#2b7cff"Line color
lineWidthnumber2Line thickness
lineDashnumber[][]Dash pattern (e.g., [4, 4] for dashed line)
textstring""Optional label text displayed near the line
visiblebooleantrueWhether the line is visible
lockedbooleanfalseWhether the line is locked from editing

Events​

The Price Line supports the following events:

// Listen for price line creation
chart.on('horizontal-line-create', (event) => {
  console.log('Price line created:', event.id);
});

// Listen for price line modification
chart.on('horizontal-line-change', (event) => {
  console.log('Price line changed:', event.id, event.property, event.value);
});

// Listen for price line removal
chart.on('horizontal-line-remove', (event) => {
  console.log('Price line removed:', event.id);
});

Practical Example​

// Create multiple price lines for technical analysis
const supportLine = await chart.createHorizontalLine();
supportLine.setPrice(138.25);
supportLine.setColor("#4caf50");
supportLine.setText("Support Level");

const resistanceLine = await chart.createHorizontalLine();
resistanceLine.setPrice(148.75);
resistanceLine.setColor("#f44336");
resistanceLine.setText("Resistance Level");

const pivotLine = await chart.createHorizontalLine();
pivotLine.setPrice(143.50);
pivotLine.setColor("#9c27b0");
pivotLine.setLineDash([2, 2]);
pivotLine.setText("Pivot Point");

// Create a price label for additional context
const priceLabel = await chart.createPriceLabel();
priceLabel.setPrice(145.25);
priceLabel.setText("Target Zone");

Use Cases​

  • Technical Analysis: Mark support and resistance levels
  • Pivot Points: Indicate daily/weekly/monthly pivot points
  • Price Targets: Show profit targets and entry zones
  • Trend Analysis: Identify key price levels in trend channels
  • Educational Purposes: Teach price action and market structure

Internal Behavior​

The Price Line (implemented as HorizontalLine) has the following characteristics:

  • Uses priceToY() conversion for pixel positioning
  • Renders across the full chart width regardless of time range
  • Maintains fixed price positioning during zoom/pan operations
  • Supports single-point placement (only requires price value)
  • Implements hit testing for selection and interaction
  • Provides custom anchor points for easy manipulation
  • Optimized rendering with canvas path operations
  • Integrates with the chart's drawing layer management system