How can I display 2 charts side by side in react using material UI?

Question

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.

Any help is appreciated. Thanks.

Answer 1

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>