Labels when resizing spread unevenly
Heres the code:
<div style={{
width: '90%',
height: '100%',
marginBottom: '20px', // Adjust the margin as neede
}}>
<BarChart
series={[
{data: entradasPorTiempo, color: '#FF9F7D', showMark: false, label: "Entradas"},
{data: salidasPorTiempo, color: '#FE614C', showMark: false, label: "Salidas"}
]}
xAxis={[{ scaleType: 'band', data: xLabels }]}
sx={{
'& .MuiChartsAxisHighlight-root': {
stroke: "rgba(106, 199, 49, 0.25)",
strokeDasharray: "none"
},
'& .MuiChartsAxis-line': {
stroke: "transparent",
strokeDasharray: "none"
},
'& .MuiChartsAxis-tick': {
stroke: "#F2F2F2",
strokeDasharray: "none"
},
}}
slots={{axisTickLabel: CustomAxisTickLabel}}
slotProps={{ legend: { hidden: true }, axisLine: {style: {stroke: "transparent", strokeDasharray: "none"}}, axisTick: {style: {stroke: "#F2F2F2", strokeDasharray: "none"}} }}
/>
</div>
When utilizing the BarChart component from MUI-X Charts section, and making it responsive, when resizing the ticks in the X axis spread unevenly, instead of waiting until theres enough space for all of them, it adds labels when it can
Is there any way to make it wait till theres enough space to fill in with labels? Thank you!
Tried setting a specific width or maximum width, but that just took away the responsiveness