Victory Native xl routinely replace y axis

I am making an attempt to create a chart for monitoring weight over time.

I need to show a weeks price of information at a time however let the consumer pan the information.
If the bottom (or highest) worth of the load goes past the restrict of the y axis, then the values of the y axis needs to be up to date to maintain the road in the midst of the graph.

here is a gif representing what I am making an attempt to realize:
[]

That is the code I’ve written up to now:

import inter from "../property/fonts/inter.ttf";

operate generateWeightData(num: quantity) {
    const generatedData = [];
    let currentDate = new Date("2025-01-01");
    let currentWeight = 80.5; // Preliminary wweight

    for (let i = 0; i < num; i++) {
        generatedData.push({
            date: currentDate.getTime(),
            weight: parseFloat(currentWeight.toFixed(1)),
        });


        currentDate.setDate(currentDate.getDate() + 1);

        const dailyVariation = (Math.random() - 0.5) * 0.14;

        const development = -0.01; 
        
        currentWeight += development + dailyVariation;
    }

    return generatedData;
}

const newData = generateWeightData(365); 


const minDate = newData[0].date;
const maxDate = newData[newData.length - 1].date;

const initialDateStart = newData[0].date;
const initialDateEnd = newData[6].date; // 7 giorni (indice 0-6)

export default operate App() {
    const font = useFont(inter, 12);

    const { state: transformState } = useChartTransformState({});

    const [startDate, setDataIniziale] = useState(initialDateStart);
    const [endDate, setDataFine] = useState(initialDateEnd);

    if (!font) {
        return null;
    }

    return (

        <View fashion={{ top: 500, backgroundColor: "#fff" }}>
            <CartesianChart
                knowledge={newData}
                xKey="date"
                yKeys={["weight"]}
                padding={{ left: 20, proper: 20, backside: 20 }}
                viewport={{ x: [startDate, endDate] }}
                area={{ x: [minDate, maxDate] }}
                xAxis={{
                    enableRescaling: true,
                    axisSide: "backside",
                    font: font,
                    tickCount: 7,
                    formatXLabel: (worth) =>
                        new Date(worth).toLocaleString("en-US", {
                            month: "brief",
                            day: "numeric",
                        }),
                }}
                yAxis={[
                    {
                        axisSide: "left",
                        font: font,
                        formatYLabel: (value) => `${value.toFixed(1)}kg`,
                        enableRescaling: true,
                    },
                ]}
                body={{ lineWidth: 2 }}
                transformState={transformState}
                transformConfig={{
                    pan: { dimensions: ["x"] },
                }}
                onChartBoundsChange={(e) => {

                }}

                onScaleChange={(xScale, yScale) => {

                }}
            >
                {({ factors }) => (
                    <Line
                        factors={factors.weight}
                        colour="purple"
                        strokeWidth={3}
                        animate={{ sort: "timing", period: 300 }}
                        curveType="pure"
                        connectMissingData={true}
                    />
                )}
            </CartesianChart>
        </View>
    );
}

It produces the next:
[]

I attempted working with viewport and area however I can not seem to make them work proper, it both reveals all the information from begin to end or only a fraction with out the labels on the x axis. Additionally, the y axis labels don’t routinely rescale.

Are you able to information me in the precise path?