acttrader-charts 1.3.0-beta.20 → 1.3.0-beta.22

package/README.md

@@ -262,6 +262,12 @@ chart.setLevels(
 );
 ```
 
+**Trailing stop:** a trade with a trail always has a working stop, so keep passing its price as `stopLossPrice` and set `stopLossTrailing: true`. The line renders as usual but its pill reads **TSL** instead of SL, and it is read-only on the chart — no drag handle, no × — because the trail is a pip distance edited from the host's own panel. The level's TP stays fully editable.
+
+```ts
+{ label: 'POS-2', price: 1.0850, side: 'buy', lots: 1, stopLossPrice: 1.0800, stopLossTrailing: true }
+```
+
 **Bracket orders via `ToClose`** — link a separate SL/TP pending order to a parent level:
 
 ```ts
@@ -389,7 +395,7 @@ Alert | Pending | SL | TP | TSL | ×
 ```
 
 - No price readout — the axis already shows the price at that point.
-- **Alert** calls `onAddAlert(price)`. The chip is only rendered when that callback is set.
+- **Alert** calls `onAddAlert(price)`. The chip is only rendered when that callback is set. The same callback also backs the **Alert** entry of the advanced header's ⋯ menu (`headerOverflowMenu`), which passes the current market price (live ask, else bid, else last close) so the host opens the same form.
 - **Pending** opens a sub-menu just above the bar — an `Above · 1.17586` / `Below · …`
   header, then the two orders that make sense at that price (`Buy Limit` / `Sell Stop`
   below the market, `Sell Limit` / `Buy Stop` above), each with its `@ price`. Picking a
@@ -526,14 +532,15 @@ use `{symbol}` and `{count}`. The maths behind the pill is exported as
 | `hideLevelConfirmCancel` | | `false` | Hide on-canvas ✓/✗ confirm-cancel buttons for TFC level edits |
 | `deselectActiveOnOutsideClick` | | `false` | When `true`, clicking/tapping anywhere outside a selected trade level dismisses it (reverting any pending edits, mirroring ✗ Cancel). Default `false` keeps the level active so incidental clicks — price-axis resize, taps outside the QTY input — don't drop an in-progress edit. The level can still be dismissed via ✓/✗, tapping the level again, or `setLevels()` removing it |
 | `showTradeLevelsAlways` | | `false` | Always render SL/TP bracket lines + price pills, even when the parent level is not hovered or selected. The close (×) button stays hover-only so the chart isn't cluttered. Toggleable from the Settings dialog (Trading tab). Persisted in `localStorage`. |
+| `revealNewBrackets` | | `false` | When a level gains a **new** SL/TP — placed from the host's order panel, so it arrives via `setLevels()`, `updateLevelBracket()` or `updateDraftOrderBracket()` — whose price sits outside the visible price range, widen (compress) the price axis so the new line comes into view together with the candles already on screen. Animated, and the trader can drag or reset the axis afterwards as usual. A bracket dragged on the chart is visible by construction and never triggers it. Inert in compare (percent) mode |
 | `tradeLevelButtonScale` | | `1` | Multiplier for trade-level Confirm/Cancel/Edit/Close button radii and gaps. Scales visuals **and** hit/drag areas together — raise it on touch devices for larger tap targets. Clamped to `[1, 3]`. Also settable at runtime via `chart.setTradeLevelButtonScale(scale)` |
 | `tradeLevelBadgeScale` | | `1` | Shrinks the on-chart position / order tag — font, padding, grip, ✎ × buttons and their hit areas together. `0.6` is about half the default area. Clamped `[0.5, 1]` |
 | `tradeLevelBadgeAnchor` | | `"auto"` | `"left"` homes the tag at the plot's left edge like an axis label, whatever the open price or time anchor, so it never covers candles until the trader drags it. With `features.orderLineTimeDrag` the tag stays draggable along the time axis and the drop is remembered as before |
 | `tfcEnabled` | | `true` | Enable the TFC toggle button in the top bar. When `false`, TFC is completely disabled — the toggle button is hidden and all trade levels, draft orders, and the floating trade button are suppressed |
 | `crosshairEnabled` | | `true` | Draw the mouse crosshair. `false` hides it **and** the floating "place order at this price" button that rides on its horizontal line, ignores mirrored `setCrosshair()` calls and keeps the mobile long-press crosshair from arming. Trade levels, drawings and TFC are unaffected. Runtime: `chart.setCrosshairEnabled(enabled)` |
-| `enableCrossHairHeader` | | `false` | Crosshair on/off switch in the header (advanced toolbar, default top bar and the compact per-pane strip): the reference `rounded-sm` button. The crosshair is on by default, so the icon starts tinted; a click hides the crosshair (and the trade button riding on it) and drops the icon to its plain state, the next click brings both back. Calls `setCrosshairEnabled()` and emits `crosshairToggle` so the host can persist the choice — see [Header crosshair switch](#header-crosshair-switch--enablecrosshairheader) |
+| `enableCrossHairHeader` | | `false` | Crosshair on/off switch in the header (advanced toolbar, default top bar, the compact per-pane strip and the mobile header): the reference `rounded-sm` button. The crosshair is on by default, so the icon starts tinted; a click hides the crosshair (and the trade button riding on it) and drops the icon to its plain state, the next click brings both back. Calls `setCrosshairEnabled()` and emits `crosshairToggle` so the host can persist the choice — see [Header crosshair switch](#header-crosshair-switch--enablecrosshairheader) |
 | `enableCrosshairToggle` | | `false` | **Deprecated** — alias of `enableCrossHairHeader`; either flag renders the switch |
-| `headerOverflowMenu` | | `false` | Advanced header only: the reference Hanko header. A 32px bar with six lowercase timeframe pills (`1m 5m 15m 1h 4h 1d`) and a ⌄ for the rest, then crosshair · P/L · Layout (grid icon) · ⋯ · fullscreen at 24px. Draw, Chart type, Indicators, Compare, Snapshot and Chart settings fold into the ⋯ menu; each keeps its behaviour |
+| `headerOverflowMenu` | | `false` | Advanced header only: the reference Hanko header. A 32px bar with six lowercase timeframe pills (`1m 5m 15m 1h 4h 1d`) and a ⌄ for the rest, then crosshair · P/L · Layout (grid icon) · ⋯ · fullscreen at 24px. Draw, Chart type, Indicators, Compare, Snapshot and Chart settings fold into the ⋯ menu; each keeps its behaviour. With `onAddAlert` set the menu also offers **Alert** (own group, before Snapshot) at the current market price |
 | `features.orderLineTimeDrag` | | `false` | Enable **horizontal (time-axis) order-line dragging**. A level with `timeDraggable: true` (position or pending order) can have its info-box badge dragged left/right to re-anchor the order to a different candle — **price stays locked** while dragging sideways. Pending orders keep their vertical price drag: the badge's first movement picks the axis. Emits `orderLineMoved` on release. Off by default; intended to be enabled per broker (e.g. Hankotrade) by the host app |
 | `orderLineDragSnap` | | `true` | When horizontal dragging is enabled, snap the badge to the nearest candle on release. Set `false` to keep the exact released time |
 | `orderLineAnchorPersistence` | | `true` | When horizontal dragging is enabled, remember where each badge was dropped in `localStorage` (key `finchart.orderLineTimeAnchors`, keyed by level label) so it comes back to the same candle after a reload. A persisted anchor overrides the level's `timestamp` until the badge is dragged again. Set `false` to persist anchors yourself |
@@ -548,7 +555,7 @@ use `{symbol}` and `{count}`. The maths behind the pill is exported as
 | `quantityFieldConfig` | | — | Constraints for the draft order QTY field (only relevant when `showQuantityField` is `true`). Object: `{ minLots?: number, maxLots?: number }`. `minLots` also sets the initial quantity and the step value for the flyout input (default: `1`). `maxLots` caps the input (default: `100`) |
 | `tradesThresholdForHorizontalLine` | | `2` | Level count above which render auto-switches to `"dot"` mode |
 | `timezone` | | `"UTC"` | IANA timezone string for time-axis and crosshair labels. `"UTC"` (default), `"local"` (browser/device timezone), or any IANA string (`"America/New_York"`, `"Europe/London"`, etc.) |
-| `canvasColors` | | — | Per-theme colour overrides for the **canvas only** (persisted from the Settings dialog). The surface picks — `background`, `grid`, `axisText`, `axisBorder`, `crosshair` — repaint the chart canvas and leave the chart chrome (top/bottom/left bars, dialogs, popovers) on the theme from `themeOverrides`. Series picks (`candleUp`/`candleDown`/`wickUp`/`wickDown`/`borderUp`/`borderDown`/`volumeUp`/`volumeDown`) apply everywhere, so legends and indicator pills keep tracking them |
+| `canvasColors` | | — | Per-theme colour overrides for the **canvas only** (persisted from the Settings dialog; runtime: `chart.setCanvasColors()`). The surface picks — `background`, `grid`, `axisText`, `axisBorder`, `crosshair` — repaint the chart canvas and leave the chart chrome (top/bottom/left bars, dialogs, popovers) on the theme from `themeOverrides`. Series picks (`candleUp`/`candleDown`/`wickUp`/`wickDown`/`borderUp`/`borderDown`/`volumeUp`/`volumeDown`) apply everywhere, so legends and indicator pills keep tracking them |
 | `aggregateFrom` | | — | Fetch finer-grained data and aggregate client-side per timeframe |
 | `onOrderSubmit` | | — | Called when user submits a trade via the floating button |
 | `onLevelEdit` | | — | Called when user confirms a TFC level edit |
@@ -931,7 +938,8 @@ chart.setTimeframe(tf: Timeframe): this                         // change timefr
 chart.setDuration(d: Duration, timeframe?: Timeframe): this     // select a duration; pairs the timeframe and reloads
 chart.getDuration(): Duration | null                            // currently selected duration
 chart.setBracketLabelMode(mode, currencySymbol?): this          // SL/TP pills: 'price' (default) or 'amount'
-chart.setThemeOverrides(overrides: ThemeOverrides): this               // update per-theme color overrides at runtime
+chart.setThemeOverrides(overrides: ThemeOverrides): this               // update per-theme color overrides at runtime — canvas AND chrome
+chart.setCanvasColors(colors: ChartConfig['canvasColors'] | null): this // recolour the canvas only at runtime (same picks as the Settings dialog); null clears
 chart.setTimezone(tz: string): this                                // change display timezone at runtime
 chart.setVolume(show: boolean): this
 ```

package/dist/{MACD-BM9VDMeg.d.cts → MACD-B6SoR6iH.d.cts}

@@ -1133,6 +1133,16 @@ interface ChartConfig {
      * Default: `true`. Set `false` to only show them on hover/selection.
      */
     showTradeLevelsAlways?: boolean;
+    /**
+     * When a level gains a new SL/TP — the host's order panel just placed it, so it
+     * arrives via `setLevels()`, `updateLevelBracket()` or `updateDraftOrderBracket()`
+     * — and that price sits outside the visible price range, widen (compress) the
+     * price axis so the new line comes into view together with the candles already
+     * on screen. Animated; the trader can drag or reset the axis afterwards as usual.
+     * A bracket dragged on the chart is visible by construction, so this never fires
+     * for it. Off in compare (percent) mode. Default: `false`.
+     */
+    revealNewBrackets?: boolean;
     /**
      * Show the candle countdown timer on the right price axis, just below
      * the live price tag. Subject to the same `candleCountdownTimeframes`
@@ -1216,7 +1226,9 @@ interface ChartConfig {
     symbolNameDecoration?: 'underline' | 'none' | 'hover';
     /**
      * Called with the clicked price when the user picks **Alert** on the trade
-     * action bar (`features.tradeActionBar`). Omit to leave the Alert chip out.
+     * action bar (`features.tradeActionBar`), and with the current market price
+     * (live ask, else bid, else last close) from the **Alert** entry of the
+     * advanced header's ⋯ menu (`headerOverflowMenu`). Omit to leave both out.
      */
     onAddAlert?: (price: number) => void;
     /**
@@ -2115,6 +2127,13 @@ interface PositionLevel {
     stopLossPrice?: number;
     /** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
     stopLossData?: unknown;
+    /**
+     * The stop-loss is a trailing stop. A trade with a trail always has a working stop
+     * at `stopLossPrice`, so the line still renders — its pill reads "TSL" instead of
+     * "SL" — but it is read-only on the chart (no drag handle, no ×): the trail lives
+     * in pips and is edited from the host's order panel. Default: false.
+     */
+    stopLossTrailing?: boolean;
     /** Take-profit price. Renders as a secondary dashed line above entry (buy) or below (sell). Draggable — emits `tradeLevelBracketDrag`. */
     takeProfitPrice?: number;
     /** Data object for the TP bracket — returned in TP-related events instead of the parent's `data`. */
@@ -2197,6 +2216,8 @@ interface PendingOrderLevel {
     stopLossPrice?: number;
     /** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
     stopLossData?: unknown;
+    /** The stop-loss is a trailing stop — pill reads "TSL", read-only on the chart. See `PositionLevel.stopLossTrailing`. */
+    stopLossTrailing?: boolean;
     /**
      * Take-profit price. Renders as a secondary dashed line above the order price
      * (for buy orders) or below (for sell orders). Draggable — emits `tradeLevelBracketDrag`.

package/dist/{MACD-BM9VDMeg.d.ts → MACD-B6SoR6iH.d.ts}

@@ -1133,6 +1133,16 @@ interface ChartConfig {
      * Default: `true`. Set `false` to only show them on hover/selection.
      */
     showTradeLevelsAlways?: boolean;
+    /**
+     * When a level gains a new SL/TP — the host's order panel just placed it, so it
+     * arrives via `setLevels()`, `updateLevelBracket()` or `updateDraftOrderBracket()`
+     * — and that price sits outside the visible price range, widen (compress) the
+     * price axis so the new line comes into view together with the candles already
+     * on screen. Animated; the trader can drag or reset the axis afterwards as usual.
+     * A bracket dragged on the chart is visible by construction, so this never fires
+     * for it. Off in compare (percent) mode. Default: `false`.
+     */
+    revealNewBrackets?: boolean;
     /**
      * Show the candle countdown timer on the right price axis, just below
      * the live price tag. Subject to the same `candleCountdownTimeframes`
@@ -1216,7 +1226,9 @@ interface ChartConfig {
     symbolNameDecoration?: 'underline' | 'none' | 'hover';
     /**
      * Called with the clicked price when the user picks **Alert** on the trade
-     * action bar (`features.tradeActionBar`). Omit to leave the Alert chip out.
+     * action bar (`features.tradeActionBar`), and with the current market price
+     * (live ask, else bid, else last close) from the **Alert** entry of the
+     * advanced header's ⋯ menu (`headerOverflowMenu`). Omit to leave both out.
      */
     onAddAlert?: (price: number) => void;
     /**
@@ -2115,6 +2127,13 @@ interface PositionLevel {
     stopLossPrice?: number;
     /** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
     stopLossData?: unknown;
+    /**
+     * The stop-loss is a trailing stop. A trade with a trail always has a working stop
+     * at `stopLossPrice`, so the line still renders — its pill reads "TSL" instead of
+     * "SL" — but it is read-only on the chart (no drag handle, no ×): the trail lives
+     * in pips and is edited from the host's order panel. Default: false.
+     */
+    stopLossTrailing?: boolean;
     /** Take-profit price. Renders as a secondary dashed line above entry (buy) or below (sell). Draggable — emits `tradeLevelBracketDrag`. */
     takeProfitPrice?: number;
     /** Data object for the TP bracket — returned in TP-related events instead of the parent's `data`. */
@@ -2197,6 +2216,8 @@ interface PendingOrderLevel {
     stopLossPrice?: number;
     /** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
     stopLossData?: unknown;
+    /** The stop-loss is a trailing stop — pill reads "TSL", read-only on the chart. See `PositionLevel.stopLossTrailing`. */
+    stopLossTrailing?: boolean;
     /**
      * Take-profit price. Renders as a secondary dashed line above the order price
      * (for buy orders) or below (for sell orders). Draggable — emits `tradeLevelBracketDrag`.