Skip to main content

Y-Axis Price Labels

DXcharts React supports various price labels on the Y-axis. These labels can display real-time market data such as bid/ask prices, previous day close, pre/post market prices, and viewport high/low values.

Available Label Types​

Label TypeDescriptionData Required
Last PriceCurrent price of the instrumentCandle data (automatically calculated)
Bid/AskCurrent bid and ask pricesServiceData.bid and ServiceData.ask
Previous Day ClosePrevious trading day's closing priceServiceData.prevDayClosePrice
Pre/Post Market ClosePre-market or after-hours closing priceServiceData.prePostMarketClose
High/LowHighest and lowest prices in the visible viewportCandle data (automatically calculated)
StudiesPrice labels for indicators/studiesStudy data (automatically calculated)
Countdown to Bar CloseTime remaining until the current candle closesCandle data (automatically calculated)

Label Modes​

Each label type supports the following display modes:

export type YAxisLabelMode = 'none' | 'line' | 'line-label' | 'label';
  • none - Label is hidden
  • line - Only a horizontal line is shown at the price level
  • label - Only the price label badge is shown
  • line-label - Both line and label are displayed

Configuring Labels​

Initial Configuration​

You can configure Y-axis labels through the chart configuration:

import { DXChart } from '@dx-private/dxchart5-react';

const config = {
	chartCoreConfig: {
		components: {
			yAxis: {
				labels: {
					descriptions: true,
					settings: {
						lastPrice: { mode: 'label' },
						bidAsk: { mode: 'label' },
						highLow: { mode: 'line-label' },
						prevDayClose: { mode: 'label' },
						prePostMarket: { mode: 'label' },
						countdownToBarClose: { mode: 'label' },
					},
				},
			},
		},
	},
};

<DXChart config={config} />;

Runtime Configuration via API​

You can also change label modes at runtime using the chart API:

// Access the chart instance
chart.yAxis.changeLabelMode('bidAsk', 'line-label');
chart.yAxis.changeLabelMode('highLow', 'label');
chart.yAxis.changeLabelMode('prevDayClose', 'none');

Providing Data for Labels​

ServiceData Interface​

To display Bid/Ask, Previous Day Close, and Pre/Post Market labels, you need to provide the corresponding data through the ChartDataProvider:

export interface ServiceData {
    /** Previous trading day's closing price. Used for "Previous Day Close" label. */
    prevDayClosePrice?: number;
    /** Pre-market or after-hours closing price. Used for "Pre/Post Market Close" label. */
    prePostMarketClose?: number;
    /** Current bid price. Used for "Bid" label. */
    bid?: number;
    /** Current ask price. Used for "Ask" label. */
    ask?: number;
}

Implementing ServiceDataProvider​

The ChartDataProvider interface extends ServiceDataProvider, which requires implementing two methods:

export interface ServiceDataProvider {
    /**
     * Subscribe to service data updates for a symbol.
     * @param symbol - The instrument symbol to subscribe to
     * @param subscribeCallback - Callback function that receives ServiceData updates
     */
    subscribeServiceData(symbol: string, subscribeCallback: (data: ServiceData) => void): void;
    /**
     * Unsubscribe from service data updates for a symbol.
     * @param symbol - The instrument symbol to unsubscribe from
     */
    unsubscribeServiceData(symbol: string): void;
}

Example Implementation​

import { ChartDataProvider, ServiceData } from '@dx-private/dxchart5-react';

class MyChartDataProvider implements ChartDataProvider {
	private serviceDataCallbacks: Map<string, (data: ServiceData) => void> = new Map();

	// ... other ChartDataProvider methods ...

	subscribeServiceData(symbol: string, subscribeCallback: (data: ServiceData) => void): void {
		this.serviceDataCallbacks.set(symbol, subscribeCallback);

		// Connect to your real-time data source
		this.dataSource.subscribeQuotes(symbol, quote => {
			const serviceData: ServiceData = {
				bid: quote.bidPrice,
				ask: quote.askPrice,
				prevDayClosePrice: quote.previousClose,
				prePostMarketClose: quote.extendedHoursPrice,
			};
			subscribeCallback(serviceData);
		});
	}

	unsubscribeServiceData(symbol: string): void {
		this.serviceDataCallbacks.delete(symbol);
		this.dataSource.unsubscribeQuotes(symbol);
	}
}

Label-Specific Requirements​

Bid/Ask Labels​

  • Data Required: ServiceData.bid and ServiceData.ask
  • Use Case: Display current bid and ask prices for real-time trading
  • Shows two separate labels on the Y-axis
// Provide bid/ask data
subscribeCallback({
	bid: 150.25,
	ask: 150.3,
});

Previous Day Close Label​

  • Data Required: ServiceData.prevDayClosePrice
  • Use Case: Reference point for daily price movement
  • Note: Only visible for aggregation periods less than 23 hours
// Provide previous day close
subscribeCallback({
	prevDayClosePrice: 149.5,
});

Pre/Post Market Close Label​

  • Data Required: ServiceData.prePostMarketClose
  • Prerequisites:
    • Extended hours must be disabled (extendedHours.visible: false)
    • Aggregation period must be less than 1 day
    • Current time must be within pre-market or after-market sessions
  • Use Case: Display the closing price from extended trading sessions
// Provide pre/post market close price
subscribeCallback({
	prePostMarketClose: 151.0,
});

Note: The Pre/Post Market label requires a properly configured TradingSessionsProvider to determine which session (pre-market or after-market) is currently active.

High/Low Labels​

  • Data Required: None (calculated automatically from visible candles)
  • Use Case: Quickly identify the highest and lowest prices in the current viewport
  • Automatically updates as the user scrolls or zooms the chart

Studies Labels​

  • Data Required: None (calculated from study values)
  • Use Case: Display current values of indicators on the Y-axis
  • Controlled separately through the Y-axis menu

Countdown to Bar Close​

  • Data Required: None (calculated from candle timestamps)
  • Use Case: Show remaining time until the current candle closes
  • Useful for time-sensitive trading decisions

Theming Labels​

You can customize the appearance of price labels through the chart theme:

const config = {
	chartCoreConfig: {
		colors: {
			labels: {
				bidAsk: {
					bid: {
						boxColor: '#67AD6D', // Green background
						textColor: '#FFFFFF', // Text
						descriptionText: 'Bid', // Label description
					},
					ask: {
						boxColor: '#E85050', // Red background
						textColor: '#FFFFFF',
						descriptionText: 'Ask',
					},
				},
				highLow: {
					high: {
						boxColor: '#4CAF50',
						textColor: '#FFFFFF',
						descriptionText: 'H',
					},
					low: {
						boxColor: '#F44336',
						textColor: '#FFFFFF',
						descriptionText: 'L',
					},
				},
				prevDayClose: {
					boxColor: '#6B6056',
					textColor: '#FFFFFF',
					descriptionText: 'PDC',
				},
				prePostMarket: {
					pre: {
						boxColor: '#26FB95',
						textColor: '#000000',
						descriptionText: 'Pre',
					},
					post: {
						boxColor: '#26FB95',
						textColor: '#000000',
						descriptionText: 'Post',
					},
				},
			},
		},
	},
};

Showing Label Descriptions​

Label descriptions (e.g., "Bid", "Ask", "H", "L") can be toggled globally:

// In configuration
const config = {
	chartCoreConfig: {
		components: {
			yAxis: {
				labels: {
					descriptions: true, // Enable descriptions for all labels
				},
			},
		},
	},
};

// Or at runtime
chart.mainPane.mainExtent.yAxis.changeLabelsDescriptionVisibility(true);

Example​