Price tags that never cover each other
Look at the right edge of a trading chart while a position is open. There is the last price, with the time left in the bar under it. There is the position's entry, its stop and its target. A limit order waits a few ticks away. With quotes on, the bid and the ask sit either side of the last price. The day's high and low have tags, and on a market with daily limits so do the ceiling, the floor and…
When a trading position is open, several price indicators are displayed around the current market price. These include the last traded price, entry point, stop loss, target price, bid, ask, high, low, and reference price. On a chart with daily limits, the ceiling, floor, and reference price also appear. However, when these price tags are too close together, they can overlap and become difficult to read.
The obvious solution is to arrange the tags vertically, pushing each one down until it clears the one above it. This layout works well for a static image, but it fails on a live chart. As the last traded price changes with every tick, the tags below it move along with it, making the stop loss tag appear to jump around. To solve this issue, the layout uses a fixed anchor point - the current last traded price.
All other tags are positioned relative to this anchor. The tags above the anchor are pushed upward, while those below are pushed downward. Each tag moves only as far as the tag closest to the anchor needs it to, ensuring that no tag covers another. The layout takes into account the varying heights of the tags, with the last traded price's tag extending further down due to the bar countdown displayed under it.
The algorithm also handles ties in prices by consistently placing the tag on the anchor's price higher than the others. If a tag's anchor disappears from the plot, the nearest tag in the middle of the group remains fixed. Tags that extend beyond the plot are not displayed, preventing them from overlapping with other tags. The layout also considers the placement of other elements on the chart, such as the price axis, order placement button, legend, and take-profit targets.
The tags are designed to accommodate these elements without overlapping, ensuring that the chart remains clear and easy to read. The chart.setAxisLabelsAligned() function can be used to disable this automatic layout, allowing developers to manually position the tags if desired.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
