export const saveFiguresToLocalStorage = (figures: { [key: string]: any }) => {
  localStorage.setItem("figures", JSON.stringify(figures));
};

export const CandleChart = ({
  candles,
  uniqueId,
  symbolName,
  orders,
  amount,
  openPrice,
  closePrice,
  onScreenshotCreated,
  chartInterval,
  setChartInterval,
  waiting,
  setWaiting,
  height,
  showIntervalSelector,
}: CandleChartProps) => {
  const chart = useRef<Chart|null>(null);
  const paneId = useRef<string>("");
  const [figureId, setFigureId] = useState<string>("");
  const ref = useRef<HTMLDivElement>(null);

  const [figures, setFigures] = useState<{ [key: string]: Figure }>({});
  const loadFiguresFromLocalStorage = (): { [key: string]: Figure } => {
    const figuresData = localStorage.getItem("figures");

    if (figuresData) {
      return JSON.parse(figuresData);
    }

    return {};
  };

  useEffect(() => {
    const savedFigures = loadFiguresFromLocalStorage();
    setFigures(savedFigures);
  }, []);

  useEffect(() => {
    // @ts-ignore
    chart.current = init(`chart-${uniqueId}`, {styles: chartStyles(theme)});

    return () => dispose(`chart-${uniqueId}`);
  }, [uniqueId]);


  useEffect(() => {
    chart.current?.applyNewData(candles);
    chart.current?.overrideIndicator({
      name: "VOL",
      shortName: "Объем",
      calcParams: [],
      figures: [
        {
          key: "volume",
          title: "",
          type: "bar",
          baseValue: 0,
          styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
            const kLineData = data.current.kLineData as KLineData;
            let color: string;

            if (kLineData.close > kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].upColor", (defaultStyles.bars)[0].upColor) as string;
            } else if (kLineData.close < kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].downColor", (defaultStyles.bars)[0].downColor) as string;
            } else {
              color = utils.formatValue(indicator.styles, "bars[0].noChangeColor", (defaultStyles.bars)[0].noChangeColor) as string;
            }

            return {color};
          },
        },
      ],
    }, paneId.current);
    chart.current?.createIndicator("VOL", false, {id: paneId.current});
  }, [candles]);
у нас есть useState figures.
При отрисовке запрашиваются данные.(ключ это id фгуры, а свойство сама фигура)


  return (<>
<CandleChartToolbar
            setFigureId={setFigureId}
            chart={chart}
            paneId={paneId}
            handle={handle}
            setFigures={setFigures}
            overlayRefs={overlayRefs}
            figures={figures}
          />
          <Box
            ref={ref}
            id={`chart-${uniqueId}`}
            width="calc(100% - 55px)"
            height="100%"
            sx={{borderLeft: theme => `2px solid ${theme.palette.grey[50]}`}}
          >

  </>);
};

const CandleChartToolbar = ({chart, paneId, setFigureId, handle, setFigures}: CandleChartToolbarProps) => {
  const darkMode = useTheme().palette.mode === "dark";

  const removeOverlay = () => {
    chart.current?.removeOverlay();
    setFigureId("");
    setFigures({});
    localStorage.removeItem("figures");
  };

  return <>
    <Stack

      <PriceLineTool chart={chart} paneId={paneId} setFigureId={setFigureId} setFigures={setFigures}/>

      <RayLineTool chart={chart} paneId={paneId} setFigureId={setFigureId} setFigures={setFigures}/>

      <StraightLineTool chart={chart} paneId={paneId} setFigureId={setFigureId} setFigures={setFigures}/>

      <IconButton sx={{borderRadius: 2, "&:hover": {backgroundColor: darkMode ? "#2b2b2b !important" : ""}}} onClick={removeOverlay}>
        <Icon component={BasketIcon}/>
      </IconButton>
    </Stack>
  </>;
};

export default CandleChartToolbar;


import {ToolProps} from "./Tool.props";
import {Icon, IconButton, useTheme} from "@mui/material";
import React from "react";
import {PriceLineIcon} from "../../../icons";
import { saveFiguresToLocalStorage } from "../CandleChart";

const PriceLineTool = ({chart, paneId, setFigureId, setFigures}: ToolProps) => {
  const darkMode = useTheme().palette.mode === "dark";

  const onClickHandler = () => {
    chart.current?.createOverlay({
      name: "priceLine",
      styles: {
        text: {
          color: darkMode ? "#fff" : "#1e293b",
        },
        line: {
          color: darkMode ? "#fff" : "#1e293b",
        },
        point: {
          color: darkMode ? "#fff" : "#1e293b",
          borderColor: darkMode ? "#fff" : "#1e293b",
          activeColor: darkMode ? "#fff" : "#1e293b",
          activeBorderColor: darkMode ? "#fff3" : "#1e293bd1",
        },
      },
      onSelected: function(event) {
        setFigureId(event.overlay.id);

        return false;
      },
      onDeselected: function() {
        setFigureId("");

        return false;
      },
      onDrawEnd: function(event) {
        setFigures((prevFigures: any) => {
          const updatedFigures = {
            ...prevFigures,
            [event.overlay.id]: event,
          };

          saveFiguresToLocalStorage(updatedFigures);

          return updatedFigures;
        });

        return false;
      },
    });
  };

  return <>
    <IconButton onClick={onClickHandler} sx={{borderRadius: 2, color: darkMode ? "#fff" : "#677294", "&:hover": {backgroundColor: darkMode ? "#2b2b2b !important" : ""}}}>
      <Icon component={PriceLineIcon} />
    </IconButton>
  </>;
};

export default PriceLineTool;



Отрисовывается CandleChart, запрашивает данные  с localStorage, и если есть данные добавляет в figures.
Нужно... если   const [figures, setFigures] = useState<{ [key: string]: Figure }>({}); не пустоцй объект, то отрисовывать эти свойства(фигуры) на графике