<Grid item xs={12} sm={12} md={12}>
<div ref={chartRef} style={{ width: '100%', height: '600px' }} />
</Grid>
Set the chart width to 100%
but when changing the browser to different screen size, the chart size remains as the width in previous screen.
Example: Laptop screen extend with monitor screen
- In laptop screen, chart display perfectly. The chart size remains when move the chart to monitor screen.
- To make the chart size width fit the monitor screen, I will need to refresh the page.
- Same goes when move the chart back to laptop screen. The chart width is overflow and refresh needed.
I expected the chart width is responsive to the screen size.