highcharts responsive issue when reactive application used in mobile view


I'm creating a reactive app with highcharts. I have a view that shows data on charts based on api call. I want to make this app responsive for mobile users as well.
When I checked how does this web app looks, I found that the highcharts isn't fast enough to understand the screen size at first.

Two images below depict the issue in the sequence that I faced :
1. You can see in the below image that I'm trying to see how my app looks in mobile view (I'm using chrome dev tools). Now see the chart, it didn't adjust to the screen, rather it went to the left of the screen. Currently I have used display: flex and flex-direction: column for all of my charts for screen size less that or equal to 768px. But this doesn't affect the highcharts in any way. 

2. Notice in the first image, there is a draggable bar on the right , bottom and bottom right corner. Now what I did, I just increased/decreased the size, and the chart adjusted according to the screen. I also clicked on the bar below the top bar (where it says dimension responsive). there are options to select the screen size. I adjust the screen to mobile Medium then went back to mobile Large. and the charts adjusted again to screen size. (see below image)

Thanks for the help.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.