I need help in implementing 15 mint candle in my react project. Current solution is not working

[arfat-sayyed]

I need help in implementing 15 mint candle in my react project.

The Error I am getting is this

Uncaught TypeError: Cannot add property _internal_originalTime, object is not extensible
    at saveOriginalTime (lightweight-charts.development.mjs:11149:1)

and I data format array is this

{time: 1685719800, open: 718.15, high: 718.15, low: 715.9, close: 716.05}
{time: 1685720700, open: 716.05, high: 717.3, low: 715.4, close: 716.9}

and from Backend i am sending this data to my frontend with this function

        const transformedDataForChart = GetHistoryResult.data.OHLC.map(
          (item) => {
            const timestampInSeconds = Math.floor(item.LASTTRADETIME / 1000);
            const formattedData = {
              time: timestampInSeconds,
              open: item.OPEN,
              high: item.HIGH,
              low: item.LOW,
              close: item.CLOSE,
            };
            return formattedData;
          }
        );

        transformedDataForChart.reverse();

        res.status(200).json({
          success: true,
          message: 'Stock OHLC Fetched Successfully',
          data: transformedDataForChart,
        });

and my OHLC on backend which i am fethcing from API is this format

{
            "CLOSE": 59750.0,
            "HIGH": 59750.0,
            "LASTTRADETIME": 1685727900000,
            "LOW": 59750.0,
            "OPEN": 59750.0,
            "OPENINTEREST": 189,
            "QUOTATIONLOT": 1,
            "TRADEDQTY": 2
        },

Please help....I am stuck into this since 5days... I am not able to solve this

[arfat-sayyed]

function saveOriginalTime(data) {
  // eslint-disable-next-line @typescript-eslint/tslint/config
  if (data._internal_originalTime === undefined) {
    data._internal_originalTime = data.time;
  }
}

My code getting fail in this function of library

[achan-css]

My answer is late, but looking at this, you've gotten the data for each 15 minute candlestick. I'm not exactly sure what saveOriginalTime is for.
This is how I'd do it, not necessarily the only nor the best way - this should render a chart with static data.

function CandlestickChart() {
  // grabs DOM element for the place to mount
  const chartRef = useRef(null)    
  // used to manipulate the series
  const seriesRef = useRef(null)

  useEffect(() => {
    // wait for the component to mount first
    if (!chartRef.current) return
    // mount the chart on a div
    const chart = createChart(chartRef.current, {width: 400, height: 200})    // or other dimensions
    seriesRef.current = chart.addCandlestickSeries()
    seriesRef.current.setData(/*API data here*/)   // you can pass in as props, fetch with useEffect etc.

    // cleanup
    return () => chart.remove()
  }, [])

  return <div id="chart" ref={chartRef} />
}

I've put the candlestick series as a ref so that it should be possible to update the data using

seriesRef.current.update(/* next candle data*/)

There's a lot more configurations you can do like auto-sizing the chart container, formatting the time scale tick marks etc.