I am rendering a Stock/Candlestick chart using React but the issue is when I hover the cursor over a data point, the tooltip is generated but the chart is destroyed.

If I change chart.tooltip().positionMode('float'); to chart.tooltip().positionMode('point');, the tooltip doesn't render at all but the chart remains.

I have tried various different position() options and also the anchor() but none seems to have any effect on the tooltip.

take a look here for the full code https://gitlab.com/gsrnt/react-cc-tracker.git

Here is the full js page for the chart

import AnyChart from 'anychart-react'
import anychart from 'anychart'

export default class Chart extends Component {
 
 
 render() {
       var coinId = this.props.location.state.coinId.id
       var coinName = this.props.location.state.coinName.name

       //set type of chart
       var chart = anychart.stock();



       
       //if posistion mode is 'float', chart disappears 
       //if position mode is 'point', tooltip doesn't render
       chart.tooltip().positionMode('float');
       
       
       
       
       
       //chart background color
       chart.background().fill("#282c34");

       // load jsonfile + function
       anychart.data.loadJsonFile("https://api.coingecko.com/api/v3/coins/" + coinId + "/ohlc?vs_currency=usd&days=max", 
       function (data) {
         // create a data table
         var dataTable = anychart.data.table(0, 'MMM d, yyyy');
         dataTable.addData(data);
         // map data
         var mapping = dataTable.mapAs({ 'open': 1, 'high': 2, 'low': 3, 'close': 4 });
         // set the series
         var series = chart.plot(0).candlestick(mapping);
         // set the series name
         series.name(coinName + " Price Data");
         // set the chart title
         chart.title(coinName + " Price Data");
         // create a plot
         var plot = chart.plot(0);
         // create an EMA(Exponential Moving Average) indicator with period 20
         var ema20 = plot.ema(mapping, 20).series();
         // set the EMA color
         ema20.stroke('1, white');
         // disable the scroller axis
         chart.scroller().xAxis(false);
         // map "open" values for the scroller
         var openValue = dataTable.mapAs();
         openValue.addField('value', 2);
         // create a scroller series with the mapped data
         chart.scroller().column(openValue);
         
         
     })
     chart.tooltip().anchor("bottomLeft");
     return <AnyChart
         width={'100%'}
         height={900}
         instance={chart}
     />;
 }
}