# Price scale **Price scale** (or price axis) is a vertical scale on the right or left side of the chart that maps prices to coordinates and vice versa. ![Price scale](/img/price-scale.png) ## UI interactions This section describes how users can interact with the price scale. ### Adding price scale Users can add new price scales via the [*Compare symbol*] dialog by selecting *New price scale*. ![Add new price scale](/img/add-new-price-scale.gif) :::info The library allows users to have up to eight price scales on the chart. However, only one price scale can be displayed on [mobile applications]. ::: ### Changing position Users can place the price scale on the left or right side of the chart. To do this, they should select the *Move scale to left/right* button in the context menu of the price scale. ![Change price scale position](/img/move-scale-to-left.gif) You can also programmatically [change a price scale position](#change-price-scale-position). ### Pinning to scale Users can select *Pin to scale* in the symbol/indicator settings to attach symbols/indicators to the price scale. ![Pin to scale](/img/pin-to-scale.gif) You can also programmatically add a new indicator and [attach it to a new price scale](#attach-indicators-to-price-scale). ### Inverting price scale Users can invert the scale via *Invert scale* in the context menu of the price scale. When the option is enabled, the price increase is shown from top to bottom. ![Invert price scale](/img/invert-price-scale.gif) ### Resetting price scale Users can reset the price scale when it is in a non-default state. Note that the *Reset price scale* option will not appear in the context menu with adjustments such as moving the scale to the left or switching to logarithmic mode. ![Reset price scale](/img/reset-price-scale.gif) ### Quick trading :::info This feature is only available in [Trading Platform]. ::: By default, the price scale includes a *Plus* button. When users click this button, a context menu opens, allowing them to quickly access trading options. Note that this menu will be empty unless you implement the [Broker API]. ![Plus button on the price scale](/img/plus-button-price-scale.gif) To detect when the user clicks the *Plus* button, you can listen for the [`onPlusClick`] event. You can disable this button by adding the [`chart_crosshair_menu`] featureset to the [`disabled_features`] array. ## Style and default settings ### Customize price scale appearance You can customize the appearance of the price scale using the [Overrides API]. For example, the code sample below changes the text color and font size of the price and [time] scales. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-start overrides: { "scalesProperties.textColor": "#FF0000", "scalesProperties.fontSize": 14, } // highlight-end }) ``` Refer to the [Scale colors and fonts] section to see the full list of the overrides properties. ### Change price scale position You can change the position of the price scale attached to the main series. When creating a chart, use the [`priceScaleSelectionStrategyName`] property of the [Overrides API]. For example, the code sample below changes the price scale position to the left. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-start overrides: { "priceScaleSelectionStrategyName": "left", } // highlight-end }) ``` If the chart is already created, use the [`changePriceScale`] method of the [`ISeriesApi`] interface. For example, the code sample below also changes the price scale position of the main series to the left. ```js widget.onChartReady(() => { widget.activeChart().getSeries().changePriceScale("new-left"); }); ``` ### Attach indicators to price scale You can attach [indicators] to the price scale. To do this, specify the [`priceScale`] property in the `options` parameter of the [`createStudy`] method. For example, the code sample below creates a _Volume_ indicator and attaches it to a new price scale on the left. ```js widget.onChartReady(() => { widget.activeChart().createStudy('Volume', false, false, undefined, undefined, { "priceScale": "new-left" }); }); ``` ### Hide price scale If you want to hide the price scale when all series or indicators attached to it are hidden, enable the [`hide_price_scale_if_all_sources_hidden`] featureset. ### Hide settings button The scale settings button is available directly below the price scale. If users have more than one price scale on the chart, a letter will be displayed in place of the settings button. Users should click the letter that indicates the scale to open the corresponding scale settings. If you want to hide the settings button, disable the [`main_series_scale_menu`] featureset. ### Add labels You can add labels to the price scale to display additional information like a symbol name, bid/ask prices, indicators, and more. For example, the code sample below adds a symbol name label on the price scale. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-start overrides: { "scalesProperties.showSymbolLabels": true, } // highlight-end }) ``` Refer to the [Labels on the scale] section to see the full list of the overrides properties. ### Enable auto scaling You can enable auto scaling using the [`setAutoScale`] method of the [Price Scale API]. ```js widget.onChartReady(() => { const priceScale = widget.activeChart().getPanes()[0].getMainSourcePriceScale(); // highlight-next-line priceScale.setAutoScale(true) }); ``` ### Set mode You can set the price scale mode using the [Overrides API] or [Price Scale API]. However, you cannot change the price scale mode using the [`applyOverrides`] method. When creating a chart, use [`overrides`] to change the price scale mode. For example, the code sample below enables the percentage mode. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-start overrides: { "mainSeriesProperties.priceAxisProperties.percentage": true, } // highlight-end }) ``` Refer to the [Price scale mode] section to see the full list of the overrides properties. If the chart is already created, you can change the price scale mode only using the [`setMode`] method of the [Price Scale API]. For example, the code sample below also enables the percentage mode. ```js widget.onChartReady(() => { const priceScale = widget.activeChart().getPanes()[0].getRightPriceScales()[0]; // highlight-next-line priceScale.setMode(2); }); ``` ### Set visible price range If you want to set a visible price range of the price scale, you can use the [`setVisiblePriceRange`] method of the [Price Scale API]. For example, the code sample below sets the visible price range between 140 and 170. ```js widget.onChartReady(() => { const priceScale = widget.activeChart().getPanes()[0].getRightPriceScales()[0]; // highlight-next-line priceScale.setVisiblePriceRange({ "from": 140, "to": 170 }); }); ``` ## Price formatting The [`format`][format] property in the [`LibrarySymbolInfo`] object determines how prices appear on the scale. Specifying the `volume` format displays prices as decimals in thousands, millions, billions, or trillions. If you specify the `price` format, the prices will be formatted in decimal or fractional format according to the `minmov`, `pricescale`, `minmove2`, `fractional`, `variablemintick` properties. Refer to the [Price Format] section for more information. You can also [change the decimal sign](#change-decimal-sign) for the prices or [implement your custom logic](#use-custom-formatting) of the price formatting. ### Change decimal sign You can apply custom formatting using the [`numeric_formatting`] property of the [Widget Constructor]. For example, the code sample below sets a comma to separate the decimal/fractional part of the prices. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-next-line numeric_formatting: { decimal_sign: "," }, }) ``` The image below shows that the decimal parts of the prices on the price scale and the legend are separated with a comma. ![Numeric formatting](/img/price-scale-numeric-formatting.png) ### Use custom formatting You can adjust the display format of price values using the [`custom_formatters`] property of the [Widget Constructor]. For example, the code sample below defines a custom price formatting function for the `volume` [format type][format]. This function replaces numerical zeros with letter representations like billions (B), millions (M), and thousands (K). ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", // highlight-start custom_formatters: { priceFormatterFactory: (symbolInfo, minTick) => { if (symbolInfo === null) { return null; } if (symbolInfo.format === 'volume') { return { format: (price, signPositive) => { if (price >= 1000000000) { return `${(price / 1000000000).toFixed(3)}B`; } if (price >= 1000000) { return `${(price / 1000000).toFixed(3)}M`; } if (price >= 1000) { return `${(price / 1000).toFixed(3)}K`; } return price.toFixed(2); }, }; } return null; // The default formatter will be used. }, } // highlight-end }) ``` ## Symbol currency ### Display symbol currency To display symbol currency on the price scale, follow the steps below. 1. Enable the [`pricescale_currency`] featureset to show the *Currency* menu in *Chart Settings → Scales*. 2. Assign a currency code to the [`currency_code`] property of the [`LibrarySymbolInfo`] object. Note that the currency code must be a three-letter string in the [ISO 4217] format. ### Enable currency conversion The library provides a drop-down menu for selecting the currency in which the symbol is displayed. To switch between currencies, you should implement the currency conversion. Follow the steps below to enable the currency conversion. 1. Enable the [`pricescale_currency`] featureset to show the *Currency* menu in *Chart Settings → Scales*. 2. Add the [`currency_code`] and [`original_currency_code`] properties to the [`LibrarySymbolInfo`] object. Note that the currency code must be a three-letter string in the [ISO 4217] format. 3. Provide a list of available currencies in the [`currency_codes`] property of the [`DatafeedConfiguration`] object. 4. Pass [`currencyCode`] to the [`resolveSymbol`] method. 5. Implement the conversion algorithm. The conversion algorithms can vary, but you can choose one from the following two: - **Constant currency rate algorithm**. With this approach, you retrieve the current currency exchange rate and multiply each bar by this value. However, this approach may yield inaccurate results for historical bars if the exchange rate has fluctuated significantly over time. - **Corresponding currency rate algorithm**. With this approach, you request historical currency exchange rates from the server and then multiply each bar by its corresponding currency rate. :::info Implementing either of these algorithms is straightforward when all symbols and Forex rates share the same time zone. However, if time zones differ, you need to find an appropriate way to accurately match the corresponding rate to each bar. ::: After this, users can view symbol prices in their preferred currency. To switch to a different currency, users can click the currency drop‑down menu and choose another option. When a new currency is selected, the `resolveSymbol` method is called with the same `symbolInfo` but with an added `currency_code` property indicating the chosen currency. [`applyOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#applyoverrides [`changePriceScale`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ISeriesApi#changepricescale [`chart_crosshair_menu`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#chart_crosshair_menu [`createStudy`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#createstudy [`currencyCode`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.SymbolResolveExtension#currencycode [`currency_code`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.LibrarySymbolInfo#currency_code [`currency_codes`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DatafeedConfiguration#currency_codes [`custom_formatters`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#custom_formatters [`DatafeedConfiguration`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DatafeedConfiguration [`disabled_features`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#disabled_features [`hide_price_scale_if_all_sources_hidden`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#hide_price_scale_if_all_sources_hidden [`ISeriesApi`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ISeriesApi [`LibrarySymbolInfo`]: /api/interfaces/Charting_Library.LibrarySymbolInfo.md [`main_series_scale_menu`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#main_series_scale_menu [`numeric_formatting`]: /api/interfaces/Charting_Library.ChartingLibraryWidgetOptions.md#numeric_formatting [`onPlusClick`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.SubscribeEventsMap#onplusclick [`original_currency_code`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.LibrarySymbolInfo#original_currency_code [`overrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#overrides [`priceScale`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.CreateStudyOptions#pricescale [`pricescale_currency`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#pricescale_currency [`priceScaleSelectionStrategyName`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartPropertiesOverrides#pricescaleselectionstrategyname [`resolveSymbol`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/required-methods.md#resolvesymbol [`setAutoScale`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IPriceScaleApi#setautoscale [`setMode`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IPriceScaleApi#setmode [`setVisiblePriceRange`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IPriceScaleApi#setvisiblepricerange [Broker API]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#broker-api [*Compare symbol*]: https://charting-library-docs.xstaging.tv/latest/ui_elements/indicators.md#add-and-compare-new-series [format]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.LibrarySymbolInfo#format [indicators]: https://charting-library-docs.xstaging.tv/latest/ui_elements/indicators.md [ISO 4217]: https://www.iso.org/iso-4217-currency-codes.html [Labels on the scale]: https://charting-library-docs.xstaging.tv/latest/customization/overrides/chart-overrides.md#labels-on-the-scale [mobile applications]: https://charting-library-docs.xstaging.tv/latest/mobile_specifics.md [Overrides API]: https://charting-library-docs.xstaging.tv/latest/customization/overrides.md [Price Format]: https://charting-library-docs.xstaging.tv/latest/connecting_data/Symbology.md#price-format [Price Scale API]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IPriceScaleApi [Price scale mode]: https://charting-library-docs.xstaging.tv/latest/customization/overrides/chart-overrides.md#price-scale-mode [Scale colors and fonts]: https://charting-library-docs.xstaging.tv/latest/customization/overrides/chart-overrides.md#scale-colors-and-fonts [time]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Time-Scale.md [Trading Platform]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md [Widget Constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md --- ## Sitemap - [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt) - [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)