domain, chartBounds... how to set it correctly??

[MatteoBrescianini]

"I constantly have issues displaying the bars correctly in the group bar chart. I have a dynamic dataset, which can range from a few records to many, depending on the time interval selected by the user. It’s hard to find a usable combination of domain and padding... As the number of groups shown changes, the bars never start from the actual zero. I tried converting the 'from' and 'to' dates into milliseconds (UTC), but it doesn’t seem to react as expected... How can this issue be fixed?"

datasets shape: {
label: ' ',<--- date for each day (from the first requested to the last)
gridIn,
gridOut,
solar,
house,
}[];

my Code:

const font = useFont(commons);
const betweenGroupPadding = 0.1;
const withinGroupPadding = 0.1;
const roundedCorner = 5;

const startDate = new Date(data[0].label).getTime();
const endDate = new Date(data[data.length - 1].label).getTime();

return(
<View style={{ width: '100%', height: size, justifyContent: 'center' }}>
<CartesianChart
data={data}
xKey="label"
yKeys={['gridIn', 'gridOut', 'solar', 'house']}
domain={{
y: [
retrieveMinValue(data.map(el => [el.gridIn, el.gridOut, el.house, el.solar]).flat()),
retrieveMaxValue(data.map(el => [el.gridIn, el.gridOut, el.house, el.solar]).flat()),
],
x: [startDate, endDate],
}}
padding={{ right: 0, bottom: 5, top: 15 }}
domainPadding={{ left: 65, right: 50, top: 30 }}
axisOptions={{
formatYLabel: label => label + unit,
formatXLabel: label =>
label
? localeDateStringConvertion(label, undefined, {
day: '2-digit',
month: 'short',
}) ?? ''
: '',
font,
labelColor: '#d4d4d8',
}}>
{({ points, chartBounds }) => (
<BarGroup
chartBounds={chartBounds}
betweenGroupPadding={betweenGroupPadding}
// withinGroupPadding={withinGroupPadding}
roundedCorners={{
topLeft: roundedCorner,
topRight: roundedCorner,
}}>
<BarGroup.Bar points={points.gridIn} color={gridInColor} animate={{ type: 'timing' }} />
<BarGroup.Bar points={points.house} color={houseColor} animate={{ type: 'timing' }} />
<BarGroup.Bar points={points.gridOut} color={gridOutColor} animate={{ type: 'timing' }} />
<BarGroup.Bar points={points.solar} color={solarColor} animate={{ type: 'timing' }} />

)}


)