Why the chart trims negative x-axis

[amunim]

Whenever I refresh the page, I get this weird result. Instead of wrapping and following it trims the line below x-axis. But when state updates (by fetching fresh data) it gets fixed.

Here is my code for reference:

<div className="space-y-4">
                <Card className="@container/card">
                    <CardHeader className="relative">
                        <CardTitle>{translate("Daily Statistics")}</CardTitle>
                        <CardDescription>
                            <span className="@[540px]/card:block hidden">{translate("Statistics for")} {formatDateRange()}</span>
                            <span className="@[540px]/card:hidden">{formatDateRange()}</span>
                        </CardDescription>
                        <div className="absolute right-4 top-4">
                            <DateRangePickerWithPresets
                                date={dateRange}
                                onDateChange={setDateRange}
                            />
                        </div>
                    </CardHeader>
                    <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
                        {isDailyLoading ? (
                            <div className="w-full min-h-full flex flex-col gap-8 items-center justify-center">
                                {Array.from({ length: 5 }).map((_, i) => (
                                    <Skeleton key={i} className="w-full h-8" />
                                ))}
                            </div>
                        ) : (
                            <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
                                <AreaChart data={dailyStats}>
                                    <defs>
                                        <linearGradient id="fillSuccess" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor="var(--color-successLogs)" stopOpacity={0.8} />
                                            <stop offset="95%" stopColor="var(--color-successLogs)" stopOpacity={0.1} />
                                        </linearGradient>
                                        <linearGradient id="fillError" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor="var(--color-errorLogs)" stopOpacity={0.8} />
                                            <stop offset="95%" stopColor="var(--color-errorLogs)" stopOpacity={0.1} />
                                        </linearGradient>
                                    </defs>
                                    <CartesianGrid vertical={false} />
                                    <XAxis
                                        dataKey="date"
                                        tickLine={false}
                                        axisLine={false}
                                        tickMargin={8}
                                        minTickGap={32}
                                        tickFormatter={(value) => {
                                            const date = new Date(value);
                                            return formatDate(date);
                                        }}
                                    />
                                    <ChartTooltip
                                        cursor={false}
                                        content={
                                            <ChartTooltipContent
                                                labelFormatter={(value) => {
                                                    return formatDate(new Date(value));
                                                }}
                                                indicator="dot"
                                            />
                                        }
                                    />
                                    <Area
                                        dataKey="successLogs"
                                        type="natural"
                                        fill="url(#fillSuccess)"
                                        stroke="var(--color-successLogs)"
                                        stackId="a"
                                    />
                                    <Area
                                        dataKey="errorLogs"
                                        type="natural"
                                        fill="url(#fillError)"
                                        stroke="var(--color-errorLogs)"
                                        stackId="a"
                                    />
                                </AreaChart>
                            </ChartContainer>
                        )}
                    </CardContent>
                </Card>
            </div>

Next.js 15

[amunim]

hello