CODEWITHSUNDEEP
reactjsmaterial-uireact-chartjsformsy-material-ui
user460567
user460567

Reputation: 133

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.

Upvotes: 0

Views: 1256

Answers (1)

Prashant Jangam
Prashant Jangam

Reputation: 2828

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>

Upvotes: 2

Related Questions