I am very new to React and MUI I am trying to control the amount of spacing between the bars in my chart, here is the code that I have:
<ResponsiveChartContainer
height={300}
dataset={dataset}
series={[
{
dataKey: 'totalCost',
type: 'bar',
highlightScope: {
faded: 'global',
highlighted: 'item',
},
},
]}
xAxis={[{ scaleType: 'band', dataKey: 'monthAbbreviated', id: 'x-axis-id' }]}
colors={['rgba(101,41,158,0.2)']}
sx={{
['& .MuiBarElement-root']: {
outline: '1px solid black',
border: {
width: '1px',
color: '#2A2B30',
borderRadius: '4px',
},
},
}}
>
<BarPlot
onItemClick={(_event, d) => setState(dataset[d.dataIndex]!.rangeKey)}
tooltip={{ trigger: 'item' }}
slotProps={{
bar: {
rx: 4,
ry: 4,
},
}}
/>
<ChartsTooltip trigger='item' slots={{ itemContent: CustomItemTooltip }} />
<ChartsXAxis position='bottom' axisId='x-axis-id' tickSize={0} />
<ChartsGrid horizontal />
</ResponsiveChartContainer>
What I want to do is set the space between the bars to be explicitly 11 pixels, I know there must be a way to do this can anyone enlighten me here?
Thank you!