Hello  Andrew,

first of all thanks for the answering.

As you said when new item insert I have to call notifyInsertItem. I already calling that method when I insert the data but it's not re-painting the chart again. In fact In that video I already called the same method you mentioned. 

here is code for ref : 

import React, { useRef, useState } from 'react'
import { useEffect } from 'react';
import { IgrFinancialChart } from 'igniteui-react-charts';
import { IgrFinancialChartModule } from 'igniteui-react-charts';
// import { getdata } from './getdata';
IgrFinancialChartModule.register();

const Test = () => {

    const [chartData, setChartData] = useState([]);
    // const [realtimedata, setRealtime] = useState([]);
    // const [historicalData, sethistoricalData] = useState([]);

    const chartRef = useRef(0);

    const today = new Date();
    // const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1).getTime();
    const todayMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    console.log(today.getTime());
    console.log(todayMidnight.getTime());



    useEffect(() => {

        fetch(`https://api.binance.com/api/v3/uiKlines?symbol=BTCUSDT&interval=1m&startTime=${todayMidnight.getTime()}&endTime=${today.getTime()}&limit=1000`)
            .then(res => res.json())
            .then(data => {

                let newdata = [];

                data.forEach(item => {

                    newdata = [...newdata, {
                        date: new Date(item[0]),
                        open: parseFloat(item[1]),
                        high: parseFloat(item[2]),
                        low: parseFloat(item[3]),
                        close: parseFloat(item[4]),
                        volume: parseFloat(item[5])
                    }]


                });

                // console.log("Historical Data is : ", newdata);

                setChartData((chartData) => [...chartData, newdata])

            });

        const ws = new WebSocket(`wss://stream.binance.com:9443/ws/btcusdt@kline_1s`);

        ws.onmessage = (e) => {
            const dataJson = JSON.parse(e.data);
            // console.log("DataJson is : ", dataJson);

            const newdata = {
                date: new Date(dataJson.k.t),
                open: parseFloat(dataJson.k.o),
                high: parseFloat(dataJson.k.h),
                low: parseFloat(dataJson.k.l),
                close: parseFloat(dataJson.k.c),
                volume: parseFloat(dataJson.k.v)
            }

            // console.log(newdata);
            console.log(chartRef.current.dataSource);
            chartRef.current.dataSource.push(newdata);
            chartRef.current.notifyInsertItem(chartRef.current.dataSource, chartRef.current.dataSource.length - 1, newdata);

        }

        return () => {
            if (ws) {
                ws.close();
            }
        };
    }, [])

    function customTooltip(context) {
        const item = context.item;
        return (
            <div>
                <div>Open: ${item.open}</div>
                <div>High: ${item.high}</div>
                <div>Low: ${item.low}</div>
                <div>Close: ${item.close}</div>
            </div>
        );
    }

    return (
        <div className="container sample">
            <div className="container" style={{ height: "100vh" }}>
                <IgrFinancialChart
                    ref={chartRef}
                    tooltipTemplate={customTooltip}
                    xAxisAutoScale={false}
                    width="100%"
                    height="100%"
                    isToolbarVisible={true}
                    chartType="Candle"
                    chartTitle="Crypto Trades"
                    titleAlignment="Left"
                    titleLeftMargin="25"
                    titleTopMargin="10"
                    titleBottomMargin="10"
                    subtitle="Binance - CryptoCoin Price, Currency in USD"
                    subtitleAlignment="Left"
                    subtitleLeftMargin="25"
                    subtitleTopMargin="5"
                    subtitleBottomMargin="10"
                    yAxisMode="Numeric"
                    yAxisVisibility={false}
                    zoomSliderType="None"
                    dataSource={chartData} />
            </div>
        </div >
    )
}

export default Test

let me know if you don't get my question.

and again thanks for replying quickly. :)