@pipsend/charts 2.2.1 → 2.3.0

package/README.md

@@ -674,6 +674,34 @@ stopLoss.applyOptions({
 stopLoss.remove();
 ```
 
+### Position Lines
+
+`createPositionLine` draws entry, take profit and stop loss as one unit: a
+label per level carrying the size badge and the P&L, a close button, and a
+connector tying the three together.
+
+```javascript
+import { createPositionLine } from '@pipsend/charts';
+
+const position = createPositionLine(series, chart, {
+    entry: { price: 4306.79, badge: '1', formatText: () => '+ 2.32 USD' },
+    takeProfit: { price: 4349.58, badge: '1', formatText: (p) => `+ ${(p - 4306.79).toFixed(2)} USD` },
+    stopLoss: { price: 4266.06, badge: '1', formatText: (p) => `- ${(4306.79 - p).toFixed(2)} USD` },
+    onDragEnd: (level, price) => updateOrderInBackend(level, price),
+    onClose: (level) => cancelOrder(level)
+});
+
+position.setPrice('takeProfit', 4360);   // move a level
+position.applyOptions({ stopLoss: undefined });  // drop a level
+position.prices();                        // { entry, takeProfit }
+position.remove();
+```
+
+Every level is draggable and closable by default; set `draggable: false` or
+`closable: false` per level. The label's look is shared through `theme`
+(`background`, `borderRadius`, `paddingX`, `fontSize`, …) and defaults to the
+chart's own background, so it reads on light and dark themes alike.
+
 ---
 
 ## 🌐 Framework Integration Examples