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.
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://ko.infragistics.com/reactsite/components/charts/features/chart-performance
reactjs-example1-ltfgav.zip
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 >
Glad to hear you got things working.