reactjsmaterial-uireact-chartjsformsy-material-ui

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


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.


Solution

  • 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>