Well 0.5 person and 1.5 people don't exist so I want ticks to be full numbers. How do I do that?

"use client";
// ...
export type ChartData = {
  day: string;
  signups: number;
};

const chartConfig = {
  signups: {
    label: "Signups",
    color: "hsl(var(--chart-1))",
  },
} satisfies ChartConfig;

export const CustomChart = ({ signups }: { signups: ChartData[] }) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Total Signups</CardTitle>
        <CardDescription>
          Showing total signups for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            data={signups}
            margin={{
              left: 12,
              right: 12,
              top: 24,
              bottom: 24,
            }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="dot" />}
            />
            <Area
              dataKey="signups"
              type="linear"
              fill="var(--color-signups)"
              fillOpacity={0.4}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
};

I know I can add ticks manually and just make function that calculates all the ticks needed but is there a function to allow just full numbers...