I am trying to display 2 charts side by side at the centre of the page but I'm unable to do so. I am relatively new to material UI.
<Grid container spacing={2} >
<Grid item sm={6} >
<Nifty50/>
</Grid>
<Grid item sm={6} >
<Sensex/>
</Grid>
</Grid>
Any help is appreciated. Thanks.
Your charts are of fixed width. where as the Grid Container
and Grid Item
is fullwidth/fluid. hence Grid Item
have more size. than the charts. and by default contents inside the Grid Item
are left aligned.
you can add the Box
with text-align="center"
for your charts. this is one way of centering the content.
<Grid container spacing={2}>
<Grid item sm={6}>
<Box textAlign="center">
<Nifty50/>
</Box>
</Grid>
<Grid item sm={6}>
<Box textAlign="center">
<Sensex/>
</Box>
</Grid>
</Grid>