IgrFinancialChart is not working properly with ReactJS for me. Need help

SAGAR NANERA posted over 1 year ago

Hello there,

I am computer science student and i was working on a project. The was based on stock-market in which i have to display stock data in real-time.

and was willing to use this IgrFinancialChart.

But the chart was not working properly for me. I have checked all possible solutions but its still not working.

i am attaching a picture that showing only x axis.

Parents

No Data

Reply

29065

Offline Michael DiFilippo posted over 1 year ago

Hello,

Thank you for contacting Infragistics. I put together a sample using this template as a base:

https://stackblitz.com/edit/reactjs-example1

You can refer to this modified version or see the attached zip:
https://stackblitz.com/edit/reactjs-example1-ltfgav

The stackblitz sample got stuck but I was able to download it and run it locally.

You can refer to this topic on how to simulate live data:

https://es.infragistics.com/reactsite/components/charts/features/chart-performance

reactjs-example1-ltfgav.zip
Cancel
Reply

Verify Answer

Cancel

Children

Offline SAGAR NANERA posted over 1 year ago in reply to Michael DiFilippo

Thanks for seamless support and quick reply.

I was stuck and all of a sudden i just put styling to inner div and it was working properly.

the problem was that the chart was not occupying full viewport so it was just showing x-axis. Basically it was squeezed like you can see in old picture that I sent in question.

this is sample code that worked for me.

<div className="container sample">
            <div className="container" style={{ height: "100vh" }}>
                <IgrFinancialChart
                    ref={chartRef}
                    xAxisMinimumValue={startDate}
                    xAxisMaximumValue={endDate}
                    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={data} />
            </div>
        </div >