react-klinecharts-ui 0.3.0 → 0.4.0

package/README.md

@@ -206,6 +206,7 @@ interface KlinechartsUIState {
   periods: TerminalPeriod[]; // List of available timeframes
   mainIndicators: string[]; // Active main chart indicators
   subIndicators: Record<string, string>; // Active sub-indicators: { name → paneId }
+  indicatorAxes: Record<string, string>; // Custom Y-axis bindings: { indicatorId → yAxisId }
   styles: DeepPartial<Styles> | undefined; // Custom klinecharts styles
   screenshotUrl: string | null; // URL of the last screenshot
 }
@@ -225,6 +226,7 @@ type KlinechartsUIAction =
   | { type: "SET_LOADING"; isLoading: boolean }
   | { type: "SET_MAIN_INDICATORS"; indicators: string[] }
   | { type: "SET_SUB_INDICATORS"; indicators: Record<string, string> }
+  | { type: "SET_INDICATOR_AXES"; axes: Record<string, string> }
   | { type: "SET_STYLES"; styles: DeepPartial<Styles> | undefined }
   | { type: "SET_LOCALE"; locale: string }
   | { type: "SET_SCREENSHOT_URL"; url: string | null };
@@ -459,6 +461,9 @@ const {
   getIndicatorParams,
   isMainIndicatorActive,
   isSubIndicatorActive,
+  indicatorAxes,
+  getIndicatorAxis,
+  bindIndicatorToNewAxis,
 } = useIndicators();
 ```
 
@@ -484,9 +489,9 @@ interface IndicatorInfo {
 
 | Method                                        | Description                                                   |
 | --------------------------------------------- | ------------------------------------------------------------- |
-| `addMainIndicator(name)`                      | Creates the indicator on `candle_pane` with id `main_${name}` |
+| `addMainIndicator(name, options?)`            | Creates the indicator on `candle_pane` with id `main_${name}`. Pass `{ yAxis }` to bind it to a secondary axis (see below) |
 | `removeMainIndicator(name)`                   | Removes the indicator and updates state                       |
-| `addSubIndicator(name)`                       | Creates the indicator on a new sub-pane with id `sub_${name}` |
+| `addSubIndicator(name, options?)`             | Creates the indicator on a new sub-pane with id `sub_${name}`. Also accepts `{ yAxis }` |
 | `removeSubIndicator(name)`                    | Removes the sub-indicator and its pane                        |
 | `toggleMainIndicator(name)`                   | `add` if inactive, `remove` if active                         |
 | `toggleSubIndicator(name)`                    | Same for sub-indicators                                       |
@@ -497,6 +502,32 @@ interface IndicatorInfo {
 | `getIndicatorParams(name)`                    | Returns `[{ label, defaultValue }]` or `[]` if no parameters  |
 | `isMainIndicatorActive(name)`                 | Quick active check                                            |
 | `isSubIndicatorActive(name)`                  | Quick active check                                            |
+| `getIndicatorAxis(name, isMain)`              | Returns the custom `yAxisId` an indicator is bound to, or `undefined` for the default axis |
+| `bindIndicatorToNewAxis(name, isMain, yAxis?)`| Rebinds an existing indicator to a different Y-axis (omit `yAxis` to return it to the default axis) |
+
+#### Secondary Y-axis binding (multiple Y-axes)
+
+klinecharts v10 supports several independent Y-axes on one pane, so an indicator whose value range differs sharply from price (RSI 0–100, volume, …) can get its own scale instead of distorting the shared price axis or being forced into a separate sub-pane.
+
+```typescript
+// Add RSI on the main pane, on its own left axis (price scale stays intact)
+addMainIndicator("RSI", { yAxis: { id: "rsi_axis", position: "left" } });
+
+// Later: move it back to the shared price axis
+bindIndicatorToNewAxis("RSI", true);
+
+// Or move an indicator already on the chart onto a dedicated right axis
+bindIndicatorToNewAxis("VOL", true, { id: "vol_axis", position: "right" });
+```
+
+`yAxis` is a klinecharts `YAxisOverride`; the key field is **`id`** — indicators sharing the same `id` share one axis. Useful extras: `position` (`"left" | "right"`), `name` (scale type: `"normal" | "percentage" | "log"`), `inside`, and `needWidget` (set `false` for an invisible axis — own scale, no labels).
+
+This binding is a **persistent property, not a one-shot action**. It is tracked in provider state (`indicatorAxes`, keyed by indicator id) and preserved across:
+
+- **undo/redo** — toggling an indicator off and back on (`useUndoRedo`) restores it on the same axis, not the price axis;
+- **layout presets** — `useLayoutManager` save/load reproduces each indicator's axis 1:1.
+
+> Note: `bindIndicatorToNewAxis` removes and recreates the indicator (v10 `overrideIndicator` cannot rebind an axis), preserving calc params, styles and visibility. The rebind action itself is not pushed onto the undo stack.
 
 #### Available indicators
 

package/dist/index.cjs

@@ -58,6 +58,8 @@ function reducer(state, action) {
       return { ...state, mainIndicators: action.indicators };
     case "SET_SUB_INDICATORS":
       return { ...state, subIndicators: action.indicators };
+    case "SET_INDICATOR_AXES":
+      return { ...state, indicatorAxes: action.axes };
     case "SET_STYLES":
       return { ...state, styles: action.styles };
     case "SET_LOCALE":
@@ -120,6 +122,7 @@ function KlinechartsUIProvider({
         (acc, name) => ({ ...acc, [name]: "" }),
         {}
       ),
+      indicatorAxes: {},
       styles: opts.styles,
       screenshotUrl: null
     })
@@ -667,62 +670,95 @@ function useIndicators() {
     ];
   }, [state.subIndicators]);
   const addMainIndicator = react.useCallback(
-    (name) => {
+    (name, options) => {
       if (state.mainIndicators.includes(name)) return;
+      const yAxis = options?.yAxis;
       state.chart?.createIndicator(
-        { name, id: `main_${name}`, paneId: "candle_pane" },
-        true,
-        { id: "candle_pane" }
+        { name, id: `main_${name}` },
+        { isStack: true, pane: { id: "candle_pane" }, yAxis }
       );
       const newIndicators = [...state.mainIndicators, name];
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [`main_${name}`]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: true, paneId: "candle_pane" }
+        data: {
+          name,
+          wasActive: false,
+          isMain: true,
+          paneId: "candle_pane",
+          yAxisId: yAxis?.id
+        }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeMainIndicator = react.useCallback(
     (name) => {
-      state.chart?.removeIndicator({ id: `main_${name}` });
+      const id = `main_${name}`;
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = state.mainIndicators.filter((n) => n !== name);
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: true, paneId: "candle_pane" }
+        data: { name, wasActive: true, isMain: true, paneId: "candle_pane", yAxisId }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const addSubIndicator = react.useCallback(
-    (name) => {
+    (name, options) => {
       if (name in state.subIndicators) return;
       const id = `sub_${name}`;
-      state.chart?.createIndicator({ name, id });
+      const yAxis = options?.yAxis;
+      state.chart?.createIndicator({ name, id }, { yAxis });
       const paneId = state.chart?.getIndicators({ id })?.[0]?.paneId ?? "";
       const newIndicators = { ...state.subIndicators, [name]: paneId };
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [id]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: false, paneId }
+        data: { name, wasActive: false, isMain: false, paneId, yAxisId: yAxis?.id }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeSubIndicator = react.useCallback(
     (name) => {
+      const id = `sub_${name}`;
       const paneId = state.subIndicators[name] ?? "";
-      state.chart?.removeIndicator({ id: `sub_${name}` });
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = { ...state.subIndicators };
       delete newIndicators[name];
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: false, paneId }
+        data: { name, wasActive: true, isMain: false, paneId, yAxisId }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const toggleMainIndicator = react.useCallback(
     (name) => {
@@ -752,8 +788,10 @@ function useIndicators() {
     [state.chart]
   );
   const updateIndicatorParams = react.useCallback(
-    (name, paneId, params) => {
-      state.chart?.overrideIndicator({ name, paneId, calcParams: params });
+    // `paneId` is kept in the signature for API stability; klinecharts v10
+    // `overrideIndicator` no longer accepts it and targets by name/id instead.
+    (name, _paneId, params) => {
+      state.chart?.overrideIndicator({ name, calcParams: params });
     },
     [state.chart]
   );
@@ -774,11 +812,9 @@ function useIndicators() {
         {
           name,
           id: `main_${name}`,
-          paneId: "candle_pane",
           ...prevCalcParams ? { calcParams: prevCalcParams } : {}
         },
-        true,
-        { id: "candle_pane" }
+        { isStack: true, pane: { id: "candle_pane" } }
       );
       const newSub = { ...state.subIndicators };
       delete newSub[name];
@@ -894,7 +930,7 @@ function useIndicators() {
         if (sub.styles) {
           state.chart.overrideIndicator({
             name: sub.name,
-            paneId,
+            id,
             styles: sub.styles
           });
         }
@@ -903,6 +939,44 @@ function useIndicators() {
     },
     [state.chart, state.subIndicators, dispatch]
   );
+  const getIndicatorAxis = react.useCallback(
+    (name, isMain) => state.indicatorAxes[isMain ? `main_${name}` : `sub_${name}`],
+    [state.indicatorAxes]
+  );
+  const bindIndicatorToNewAxis = react.useCallback(
+    (name, isMain, yAxis) => {
+      if (!state.chart) return;
+      const id = isMain ? `main_${name}` : `sub_${name}`;
+      const current = state.chart.getIndicators({ id })?.[0];
+      if (!current) return;
+      const calcParams = current.calcParams;
+      const styles = current.styles;
+      const visible = current.visible ?? true;
+      const paneId = isMain ? "candle_pane" : current.paneId ?? state.subIndicators[name] ?? "";
+      state.chart.removeIndicator({ id });
+      state.chart.createIndicator(
+        {
+          name,
+          id,
+          ...calcParams ? { calcParams } : {},
+          visible
+        },
+        {
+          isStack: isMain,
+          ...paneId ? { pane: { id: paneId } } : {},
+          yAxis
+        }
+      );
+      if (styles) {
+        state.chart.overrideIndicator({ name, id, styles });
+      }
+      const nextAxes = { ...state.indicatorAxes };
+      if (yAxis?.id) nextAxes[id] = yAxis.id;
+      else delete nextAxes[id];
+      dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+    },
+    [state.chart, state.indicatorAxes, state.subIndicators, dispatch]
+  );
   return {
     mainIndicators,
     subIndicators,
@@ -926,7 +1000,10 @@ function useIndicators() {
     collapseSubIndicator,
     expandSubIndicator,
     isSubIndicatorCollapsed,
-    reorderSubIndicator
+    reorderSubIndicator,
+    indicatorAxes: state.indicatorAxes,
+    getIndicatorAxis,
+    bindIndicatorToNewAxis
   };
 }
 
@@ -1236,20 +1313,23 @@ function useKlinechartsUISettings() {
     () => TOOLTIP_SHOW_RULES.map((r) => ({ key: r, localeKey: r })),
     []
   );
+  const applyPaneAxis = react.useCallback(
+    (axis) => {
+      state.chart?.overrideYAxis?.({ paneId: "candle_pane", ...axis });
+    },
+    [state.chart]
+  );
   const hasAppliedInitial = react.useRef(false);
   react.useEffect(() => {
     if (!state.chart || hasAppliedInitial.current) return;
     hasAppliedInitial.current = true;
-    const needsPaneOptions = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
-    if (needsPaneOptions) {
-      state.chart.setPaneOptions({
-        id: "candle_pane",
-        axis: {
-          ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
-          ...settings.reverseCoordinate && { reverse: true },
-          ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
-          ...settings.yAxisInside && { inside: true }
-        }
+    const needsAxisOverride = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
+    if (needsAxisOverride) {
+      applyPaneAxis({
+        ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
+        ...settings.reverseCoordinate && { reverse: true },
+        ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
+        ...settings.yAxisInside && { inside: true }
       });
     }
     if (settings.showIndicatorLastValue) {
@@ -1272,12 +1352,6 @@ function useKlinechartsUISettings() {
     },
     [state.chart]
   );
-  const applyPaneAxis = react.useCallback(
-    (axis) => {
-      state.chart?.setPaneOptions({ id: "candle_pane", axis });
-    },
-    [state.chart]
-  );
   const setCandleType = react.useCallback(
     (type) => {
       applyStyle("candle.type", type);
@@ -1425,11 +1499,8 @@ function useKlinechartsUISettings() {
   const resetToDefaults = react.useCallback(() => {
     setSettings(defaultSettings);
     state.chart?.setStyles(state.theme);
-    state.chart?.setPaneOptions({
-      id: "candle_pane",
-      axis: { name: "normal", reverse: false, position: "right", inside: false }
-    });
-  }, [state.chart, state.theme]);
+    applyPaneAxis({ name: "normal", reverse: false, position: "right", inside: false });
+  }, [state.chart, state.theme, applyPaneAxis]);
   return {
     ...settings,
     candleTypes,
@@ -1686,21 +1757,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain, paneId } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1709,9 +1787,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1719,7 +1803,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1727,6 +1810,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setRedoStack((prev) => [
             ...prev,
@@ -1736,7 +1824,8 @@ function useUndoRedo() {
                 name,
                 wasActive: !wasActive,
                 isMain,
-                paneId
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1746,7 +1835,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   const redo = react.useCallback(() => {
     if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
       return;
@@ -1798,21 +1887,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1821,9 +1917,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1831,7 +1933,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1839,6 +1940,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setUndoStack((prev) => [
             ...prev,
@@ -1847,7 +1953,9 @@ function useUndoRedo() {
               data: {
                 name,
                 wasActive: !wasActive,
-                isMain
+                isMain,
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1857,7 +1965,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   react.useEffect(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrMeta = e.ctrlKey || e.metaKey;
@@ -1931,12 +2039,14 @@ function useLayoutManager() {
     if (indicatorMap) {
       indicatorMap.forEach((paneIndicators, paneId) => {
         paneIndicators.forEach((indicator) => {
+          const yAxisId = state.indicatorAxes[indicator.id];
           indicators2.push({
             paneId,
             name: indicator.name,
             calcParams: indicator.calcParams,
             visible: indicator.visible,
-            ...indicator.styles ? { styles: indicator.styles } : {}
+            ...indicator.styles ? { styles: indicator.styles } : {},
+            ...yAxisId ? { yAxisId } : {}
           });
         });
       });
@@ -1964,7 +2074,7 @@ function useLayoutManager() {
       indicators: indicators2,
       drawings
     };
-  }, [state.chart, state.symbol, state.period]);
+  }, [state.chart, state.symbol, state.period, state.indicatorAxes]);
   const saveLayout = react.useCallback(
     (name) => {
       const chartState = serializeState();
@@ -2012,25 +2122,35 @@ function useLayoutManager() {
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
+      const restoredAxes = {};
       if (chartState.indicators) {
         for (const ind of chartState.indicators) {
+          const isMain = ind.paneId === "candle_pane";
+          const id2 = isMain ? `main_${ind.name}` : `sub_${ind.name}`;
           chart.createIndicator(
             {
               name: ind.name,
+              id: id2,
               calcParams: ind.calcParams,
               visible: ind.visible
             },
-            ind.paneId !== "candle_pane",
-            { id: ind.paneId }
+            {
+              isStack: ind.paneId !== "candle_pane",
+              pane: { id: ind.paneId },
+              ...ind.yAxisId ? { yAxis: { id: ind.yAxisId } } : {}
+            }
           );
           if (ind.styles) {
             chart.overrideIndicator({
               name: ind.name,
-              paneId: ind.paneId,
+              id: id2,
               styles: ind.styles
             });
           }
-          if (ind.paneId === "candle_pane") {
+          if (ind.yAxisId) {
+            restoredAxes[id2] = ind.yAxisId;
+          }
+          if (isMain) {
             newMainIndicators.push(ind.name);
           } else {
             newSubIndicators[ind.name] = ind.paneId;
@@ -2045,6 +2165,10 @@ function useLayoutManager() {
         type: "SET_SUB_INDICATORS",
         indicators: newSubIndicators
       });
+      dispatch({
+        type: "SET_INDICATOR_AXES",
+        axes: restoredAxes
+      });
       if (chartState.drawings) {
         for (const drawing of chartState.drawings) {
           chart.createOverlay({
@@ -2270,8 +2394,7 @@ ${code}`
       if (placement === "main") {
         paneId = chart.createIndicator(
           { name: indicatorName },
-          true,
-          { id: "candle_pane" }
+          { isStack: true, pane: { id: "candle_pane" } }
         );
       } else {
         paneId = chart.createIndicator({ name: indicatorName });
@@ -2856,8 +2979,7 @@ function useCompare() {
       });
       const paneId = state.chart.createIndicator(
         { name: indicatorName },
-        true,
-        { id: "candle_pane" }
+        { isStack: true, pane: { id: "candle_pane" } }
       );
       indicatorsRef.current.set(ticker, {
         name: indicatorName,