0

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>

It ends up looking like this. like this

Any help is appreciated. Thanks.

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
user460567
  • 133
  • 9

1 Answers1

2

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>
Prashant Jangam
  • 2,015
  • 1
  • 9
  • 17