Glad to hear you got things working. 

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 >