Am struggling with setting initial data and updating chart data

[iphyman]

Hello @SlicedSilver, I really appreciate this wonderful project lightweight charts that you guys built, however I have been struggling for days now trying to make good use of it, below is my chart component, on loading the component I fetch history data from an API and then fetch real time price update pushed via server emitted event server. My question, how can I set initial data and keep on updating with real time data as I receive from the server?

I have been trying but is either only the history shows or only the real time data without adjusting the time frame but overwriting previous data.

export function AreaSeriesChart() {
  const theme = useTheme();
  const chartWidgetRef = useRef<HTMLDivElement>(null);
  const seriesData = useMarketStore((state) => state.seriesData);
  const marketGestureAction = useMarketStore((state) => state.marketGesture);

  useEffect(() => {
    const currentRef = chartWidgetRef.current;
    let highlight: HTMLDivElement | null = null;

    if (!currentRef) return;

    const chart = createChart(currentRef!, CHART_CONFIG);
    const series = chart.addAreaSeries({
      lineWidth: 1,
      lastPriceAnimation: LastPriceAnimationMode.Continuous,
      // color: "#ffffff",
      crosshairMarkerVisible: false,
      topColor: theme.colors.surface7,
      bottomColor: "transparent",
      lineColor: theme.colors.chartLine,
      priceFormat: {
        type: "custom",
        minMove: 0.01,
        formatter: (price: number) => new Intl.NumberFormat().format(price),
      },
    });

    series.setData(seriesData);

    let cordinate: Coordinate | null = null;

    if (seriesData.length > 0) {
      cordinate = series.priceToCoordinate(
        seriesData[seriesData.length - 1].value
      );
    }

    highlight = marketGesture(cordinate, marketGestureAction);
    highlight && currentRef?.appendChild(highlight);

    return () => {
      chart.remove();
      highlight &&
        currentRef?.contains(highlight) &&
        currentRef?.removeChild(highlight);
    };
  }, [marketGestureAction, seriesData, theme]);

  return (
    <Box
      width="100%"
      height="100%"
      id="chart-widget"
      ref={chartWidgetRef}
      position="relative"
    />
  );
}

[SlicedSilver]

You are looking for the update function on the SeriesAPI.
So the use setData when you want to replace all the data (or set the initial data) for a series, and then use update when you want to provide realtime updates (only the last bar can be updated, or a new bar added at a newer time).

See this documentation for more details: https://tradingview.github.io/lightweight-charts/docs#setting-and-updating-a-data

Finally, if you are using React then try not to create the chart on each change but rather create it once and use the setData / update / applyOptions methods to make changes to the chart.

[iphyman]

Thank you very much @SlicedSilver was overlooking that, have modified my code and it works now, saving here to help some else searching.

let chart: IChartApi;
let series: ISeriesApi<"Area">;

export function AreaSeriesChart() {
  const theme = useTheme();
  const chartWidgetRef = useRef<HTMLDivElement>(null);

  const ohlcData = useMarketStore((state) => state.ohlcData);
  const priceUpdate = useMarketStore((state) => state.priceUpdate);

// Create the chart only once 
  useEffect(() => {
    const currentRef = chartWidgetRef.current;

    if (!currentRef) return;

    chart = createChart(currentRef!, CHART_CONFIG);
    series = chart.addAreaSeries({
      lineWidth: 1,
      lastPriceAnimation: LastPriceAnimationMode.Continuous,
      // color: "#ffffff",
      crosshairMarkerVisible: false,
      topColor: theme.colors.surface7,
      bottomColor: "transparent",
      lineColor: theme.colors.chartLine,
      priceFormat: {
        type: "custom",
        minMove: 0.01,
        formatter: (price: number) => new Intl.NumberFormat().format(price),
      },
    });

    return () => chart.remove();
  }, [theme]);

// Fetch history data from store and set chart initial data
  useEffect(() => {
    if (!series) return;
    const seriesData = ohlcData.map((p) => {
      return { time: p.time, value: p.close };
    });
    series.setData(seriesData);
    chart.timeScale().fitContent();
  }, [ohlcData]);

// Update chart with realtime data 
  useEffect(() => {
    const currentRef = chartWidgetRef.current;
    if (!priceUpdate) return;

    series.update({ time: priceUpdate.time, value: priceUpdate.close });

   // let cordinate: Coordinate | null = null;
   // cordinate = series.priceToCoordinate(priceUpdate.close);

  }, [priceUpdate]);

  return (
    <Box
      width="100%"
      height="100%"
      id="chart-widget"
      ref={chartWidgetRef}
      position="relative"
    />
  );
}