# Trading overrides :::info Trading overrides are only available in [Trading Platform]. ::: This article explains how to use the [`trading_customization`](#customize-order-and-position-lines) property and the [Overrides API](#adjust-display-of-trading-features) to customize trading elements, including order and position lines, profit and loss information, and visibility settings. ## Customize order and position lines You can override the style of order and position lines using the [`trading_customization`] property of the [Widget Constructor]. This property is defined by the [`TradingCustomization`] interface, which offers four customization options: - `brokerOrder` and `brokerPosition` for lines created with the [Broker API](#created-with-broker-api). - `order` and `position` for lines created with [trading primitives](#created-with-trading-primitives). ### Created with Broker API The [Broker API] is a component that enables trading. When the chart is initially loaded, the library requests user's orders and positions from the Broker API implementation through the [`orders`] and [`positions`] methods. Order and position lines are displayed on the chart. You can override their style using the `brokerOrder` and `brokerPosition` properties of the [`trading_customization`] object. ```js new TradingView.widget({ /* Other Widget Constructor properties */ trading_customization: { brokerOrder: { /* Override properties for order lines */ }, brokerPosition: { /* Override properties for position lines */ }, }, }) ``` #### Override properties The properties within [`BrokerOrderOverrides`] and [`BrokerPositionOverrides`] follow a consistent hierarchical naming pattern. Understanding this structure helps you identify the specific property you need within the supported list. The format is: `{Side}.{State}.{Element}.{Property}`. 1. **Side** determines the direction or type of the order/position. | Value | Description | | --- | --- | | `buy` | Buy orders or long positions. | | `sell` | Sell orders or short positions. | | `takeProfit` | Take Profit bracket orders. | | `stopLoss` | Stop Loss bracket orders. | 2. **State** determines the interactivity state of the visual element. | Value | Description | | --- | --- | | `normal` | The element is active and visible in the UI. | | `disabled` | The element is inactive. For example, when another dialog is open. | 3. **Element** determines the UI component being customized. If this segment is omitted, the property applies to the line itself (e.g., `buy.normal.lineColor`). | Value | Description | | --- | --- | | `close` | The close button. | | `qty` | The quantity box. | | `reverse` | The reverse position button. | | `text` | The main text label area. | 4. **Property** determines the color attribute to change. | Value | Description | | --- | --- | | `activeColor` | The color of the element (text or icon) when hovered or clicked. | | `backgroundColor` | The fill color of the element. | | `borderBackgroundColor` | The background color drawn behind the border. It becomes visible if the border style is dashed or dotted. | | `borderColor` | The color of the element's border. | | `dividerColor` | The color of the vertical separator line (e.g., between quantity and close button). | | `hintAreaColor` | The highlight color for the area connecting a bracket order to its parent. It appears when hovering over the *TP/SL* icons of the parent order/position. | | `iconColor` | The color of the icon (e.g., for *Close* or *Reverse* buttons). | | `lineColor` | The color of the order or position line. | | `movingBackgroundColor` | The background color when the element is being dragged ([Bracket orders] only). | | `negativePlColor` | The text color for negative [Profit and loss] values. | | `pointBackgroundColor` | The background color for projection points for orders/positions. | | `pointShadowColor` | The shadow color for projection points for orders/positions. | | `positivePlColor` | The text color for positive [Profit and loss] values. | | `textColor` | The color of the text. | The example below shows how to create order and position lines using the Broker API and customize their colors. See the Pen Customize order and position lines created with Broker API. Trading Platform by TradingView (@tradingview) on CodePen. ### Created with trading primitives :::caution Starting from version 29, the methods for creating trading primitives are only available in [Trading Platform]. ::: [Trading primitives] is a low-level mechanism for creating order and position lines using the [`createOrderLine`] and [`createPositionLine`] methods. You can override the style of these lines using the `order` and `position` properties within the [`trading_customization`] object. See [`OrderLineToolOverrides`] and [`PositionLineToolOverrides`] for full lists of override properties. ```js new TradingView.widget({ /* Other Widget Constructor properties */ trading_customization: { order: { /* Override properties for order lines */ }, position: { /* Override properties for position lines */ }, } }) ``` The example below shows how to create order and position lines and customize their quantity text color, line color, style, and width. See the Pen Customize order and position lines by TradingView (@tradingview) on CodePen. ## Adjust display of trading features The [Overrides API] offers properties to adjust the display, alignment, and style of profit and loss information, as well as manage the visibility of positions, orders, and execution details. The properties are listed on the [ChartPropertiesOverrides] page and their names start with `tradingProperties`. For example, you can hide profit and loss values for [bracket orders]. ```js widget.applyOverrides({ "tradingProperties.bracketsPL.visibility": false, }); ``` [bracket orders]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/brackets.md [Broker API]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#broker-api [`BrokerOrderOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerOrderOverrides [`BrokerPositionOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerPositionOverrides [ChartPropertiesOverrides]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartPropertiesOverrides#tradingpropertiesbracketspldisplay [`createOrderLine`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#createorderline [`createPositionLine`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#createpositionline [`OrderLineToolOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderLineToolOverrides [`orders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#orders [Overrides API]: https://charting-library-docs.xstaging.tv/latest/customization/overrides.md [`PositionLineToolOverrides`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.PositionLineToolOverrides [`positions`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#positions [Profit and loss]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/profit-and-loss.md [`trading_customization`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.TradingTerminalWidgetOptions#trading_customization [`TradingCustomization`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.TradingCustomization [Trading Platform]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md [Trading primitives]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/Trading-Primitives.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)