Why mismatch between date displayed and actual date for line chart?

I produced a time series line chart and notice mismatch between the date displayed and actual date pull from SQL.

Here is my front end code that send data to API and display them with apexCharts.

<template>
    <v-row>
        <v-col cols="12" lg="6">
            <apexchart width="100%" :options="weightOptions" :series="weightSeries"></apexchart>
        </v-col>
        <v-col cols="12" lg="6">
            <apexchart width="100%" :options="heightOptions" :series="heightSeries"></apexchart>
        </v-col>
    </v-row>
</template>

<script setup>
import axios from 'axios';


async function fetchGrowth() {
    try {
        const response = await axios.get("http://127.0.0.1:8000/growth/");
        const api_data = response.data

        console.log(api_data)

        const weight_series = api_data.map(item => {
            const x = new Date(item.date)
            const y = item.weight

            return { x, y }
        });

        weightSeries.value[0].data = weight_series;

        const height_series = api_data.map(item => {
            const x = new Date(item.date)
            const y = item.height

            return { x, y }
        })

        heightSeries.value[0].data = height_series;

        console.log(heightSeries.value[0])
    } catch (error) {
        console.error("Error: " + error)
    }
}

fetchGrowth()

<--- codes for weight omitted --->


const heightSeries = ref([
    {
        name: 'Height',
        data: [],
    }
])

const heightOptions = ref({
    chart: {
        type: 'line', // line or area
        fontFamily: "Tahoma",
    },
    theme: {
        mode: 'light',
        palette: 'palette5',
    },
    colors: ['green'],
    xaxis: {
        type: 'datetime',
        labels: {
            show: true,
            rotate: -45,
            formatter: function (_, timestamp, opts) {
                return opts.dateFormatter(new Date(timestamp), "dd MMM yy");
            },
        },
        tickPlacement: 'on'
    },
    yaxis: {
        title: {
            text: "Height, cm"
        }
    },
    title: {
        text: "Height Growth",
        style: {
            fontSize: '22px',
            fontWeight: 'bold',
            fontFamily: "Georgia",
            color: '#117a65'
        },
    },
    markers: {
        size: [5],
        strokeColors: 'yellow'
    },
    stroke: {
        curve: 'smooth',
        width: 3,
        dashArray: 5
    },
})


</script>

FastAPI code as follow:

@app.get('/growth/')
def growth_metrics(*, session: Session = Depends(get_session)):
    metrics = session.exec(
        select(Growth).order_by(desc(Growth.check_in)).limit(30)
    ).all()

    metrics = [{"date": row.check_in, "weight": row.weight, 'height': row.height} for row in metrics]

    return metrics

Actual date range is 12 May 2025 - 10 Jun 2025

The chart shows first date is 11 May 2025 and last date is 9 Jun 2025.

You can turn off the datetimeUTC (by default true).

When turned on, local DateTime is converted into UTC. Turn it off if you supply date with timezone info and want to preserve it.

xaxis: {
  type: 'datetime',
  labels: {
    show: true,
    rotate: -45,
    datetimeUTC: false,
    formatter: function (_, timestamp, opts) {
      return opts.dateFormatter(new Date(timestamp), 'dd MMM yy');
    },
  },
  tickPlacement: 'on',
}

Demo @ StackBlitz