What is the way to better organize the data charts

Question

I am using React (mui/x-charts) and I have this problem As you see the Brands are not very well stacked

<Grid container spacing={2}>
                {datasGraphBar != undefined ? datasGraphBar.map((graph, index) => (
                    <Grid xs={12} md={6} key={index} className={'text-center'}>
                        <Typography variant="h6">
                            {graph.title}
                        </Typography>
                        <div className={'text-center'}>
                            <BarChart
                                xAxis={[{data: xAxis, scaleType: 'band'}]}
                                series={graph.datas}
                                width={700}
                                height={300}
                            />
                        </div>
                    </Grid>
                )) : ''}
                {datasGraphLines != undefined ? datasGraphLines.map((graph, index) => (
                    <Grid xs={12} md={6} key={index} className={'text-center'}>
                        <Typography variant="h6">
                            {graph.title}
                        </Typography>
                        <div className={'text-center'}>
                            <LineChart
                                xAxis={[{data: xAxis, scaleType: 'point'}]}
                                series={graph.datas}
                                width={700}
                                height={300}
                            />
                        </div>
                    </Grid>
                )) : ''}
            </Grid>

This is my code, can someone help me? I was trying to find the fix in docs but can't find it

I tried to find the documentation on how to change this but I am unable to find