Why first label on x-axis is bold?

I am using ApexCharts 3 to produce a line chart. I managed to produce the following chart.

It looks just fine to me except for the first label on x-axis: "1 May 2025". The label is bold. Is that a default setting? If it is, is there a way to turn it off?

<template>
    <div>
        <apexcharts height="400" width="100%" :options="chartOptions" :series="series"></apexcharts>
    </div>
</template>

<script>
import VueApexCharts from "vue3-apexcharts";


const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// Data in the X-axis must be timestamp
const series_1 = days.map(day => {

    const dateString = day < 10 ? `2025-05-0${day}` : `2025-05-${day}`
    const x = new Date(dateString)

    const y = Math.floor(Math.random() * (50 - 5 + 1)) + 5;  // min = 5; max = 50

    return { x, y }
})

const series_2 = days.map(day => {

    const dateString = day < 10 ? `2025-05-0${day}` : `2025-05-${day}`
    const x = new Date(dateString)

    const y = Math.floor(Math.random() * (50 - 5 + 1)) + 5; // max = 50; min = 5

    return { x, y }
})

export default {
    name: 'Chart',
    components: {
        apexcharts: VueApexCharts,
    },
    data: function () {
        return {
            chartOptions: {
                colors: ["blue", "green"], // set tooltip color by Series
                chart: {
                    id: 'basic-line',
                    type: 'line', // line or area
                    fontFamily: "Tahoma",
                },
                theme: {
                    mode: 'light',
                    palette: 'palette5',
                },
                legend: {
                    position: 'top',
                    fontFamily: "Georgia",
                    offsetY: -25,
                    markers: {
                        fillColors: ["blue", "green"],
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        show: true,
                        format: 'd MMM yy',
                    },
                    tickPlacement: 'on'
                },
                yaxis: {
                    max: 60,
                    title: {
                        text: "BMI"
                    }
                },
                title: {
                    text: "Title of my Line Chart !!",
                    align: 'center',
                    offsetY: 10,
                    style: {
                        fontSize: '22px',
                        fontWeight: 'bold',
                        fontFamily: "Georgia",
                        color: '#117a65'
                    },
                },
                subtitle: {
                    text: "Amazing right?",
                    align: 'center',
                    offsetY: 40,
                    style: {
                        fontSize: '18px',
                        fontWeight: 'normal',
                        fontFamily: "Georgia",
                        color: '#2980b9'
                    },
                },
                markers: {
                    size: [5, 5],
                    colors: ["blue", "green"],
                    strokeColors: 'yellow'
                },
                stroke: {
                    curve: 'smooth',
                    width: 3,
                    colors: ["blue", "green"],
                    dashArray: 5
                }
            },
            series: [
                {
                    name: 'series-1',
                    data: series_1
                },
                {
                    name: 'series-2',
                    data: series_2
                }
            ]
        }
    },
}

</script>

This is a feature of apexcharts' datetime axes - it displays in bold those labels that are integer multiples of the highest unit. Here, 1 May 2025 is the beginning of a month, so it is a multiple of the unit month, while the others, are beginning just of days, so their unit is day. You can find more details in the source code: around AxesUtils.js#L67 where the isBold property is computed, and at XAxis.js#L298 where it is applied.

There's a simple way to get rid of the bold feature: use a formatter instead of format; the existences of a formatter simply disables the units algorithm, as it can't predict what the user will actually display, see Core.js#L510. So, the solution in this particular case is to use:

formatter: function(_, timestamp, opts) {
    return opts.dateFormatter(new Date(timestamp), "d MMM yy");
},

instead of the equivalent format: 'd MMM yy'.

Demo snippet, based on the original code:

const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Data in the X-axis must be timestamp
const series_1 = days.map(day => {

    const dateString = day < 10 ? `2025-05-0${day}` : `2025-05-${day}`
    const x = new Date(dateString);
    const y = Math.floor(Math.random() * (50 - 5 + 1)) + 5;  // min = 5; max = 50

    return { x, y }
})

const series_2 = days.map(day => {

    const dateString = day < 10 ? `2025-05-0${day}` : `2025-05-${day}`
    const x = new Date(dateString)
    const y = Math.floor(Math.random() * (50 - 5 + 1)) + 5; // max = 50; min = 5

    return { x, y }
})

const config = {
    colors: ["blue", "green"], // set tooltip color by Series
    chart: {
        id: 'basic-line',
        type: 'line', // line or area
        fontFamily: "Tahoma",
    },
    theme: {
        mode: 'light',
        palette: 'palette5',
    },
    legend: {
        position: 'top',
        fontFamily: "Georgia",
        offsetY: -25,
        markers: {
            fillColors: ["blue", "green"],
        }
    },
    xaxis: {
        type: 'datetime',
        labels: {
            show: true,
            // format: 'd MMM yy',
            formatter: function(_, timestamp, opts) {
                return opts.dateFormatter(new Date(timestamp), "d MMM yy");
            },
        },
        tickPlacement: 'on'
    },
    yaxis: {
        max: 60,
        title: {
            text: "BMI"
        }
    },
    title: {
        text: "Title of my Line Chart !!",
        align: 'center',
        offsetY: 10,
        style: {
            fontSize: '22px',
            fontWeight: 'bold',
            fontFamily: "Georgia",
            color: '#117a65'
        },
    },
    subtitle: {
        text: "Amazing right?",
        align: 'center',
        offsetY: 40,
        style: {
            fontSize: '18px',
            fontWeight: 'normal',
            fontFamily: "Georgia",
            color: '#2980b9'
        },
    },
    markers: {
        size: [5, 5],
        colors: ["blue", "green"],
        strokeColors: 'yellow'
    },
    stroke: {
        curve: 'smooth',
        width: 3,
        colors: ["blue", "green"],
        dashArray: 5
    },
    series: [
        {
            name: 'series-1',
            data: series_1
        },
        {
            name: 'series-2',
            data: series_2
        }
    ]
};

const chart = new ApexCharts(document.querySelector("#chart"), config);
chart.render();

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>