I'm new to React so how to place UI Elements kind of escapes me.
But I can't quite figure it out. In the black box there is supposed to be a group of checkboxes (a component I've already made) stack vertically and in the blue box the same group of checkboxes, but put up horizontally. In the red box, a Google Scatter Chart (which I also got set up).
Using react Columns I thought that I could maybe set it up, using two Columns. But then I realized that I'd have to parent the checkboxes somehow so that wasn't a solution.
Then I thought "Why not use a grid?" so I found that Google have grids in their Material package (which is fine as I'm using it any way) so I imported that but I still can't quite get it right:
How would I solve this?
My code is below:
return(
<div>
<Grid container spacing={0}>
<Grid item xs={3}>
<CheckboxContainer checkboxes={checkboxes}/>
</Grid>
<Grid item xs={9}>
<Chart
height="400px"
chartType="ScatterChart"
loader={<div>Loading Chart</div>}
data={[
['Level','Y'],
[-4,-1],
[-3,3],
[-2,-2],
[-1,1],
[0,5],
[1,14],
[2,5],
[3,3.5],
[4,7],
]}
options={{
title: 'Transparency',
hAxis: { title: 'Level', minValue: -9, maxValue: 9 },
vAxis: { title: 'Y', minValue: -9, maxValue: 9 },
legend: 'none',
}}
rootProps={{ 'data-testid': '1'}}
/>
</Grid>
<Grid item xs={12}>
<CheckboxContainer checkboxes={checkboxes} />
</Grid>
</Grid>
</div>
)