javascript - How to make the distance between the bottom label and the bottom the same as between the other labels - Stack Overf

In Chart.js, how to make the distance between the bottom label and the bottom the same as between the other labels. The first picture is what I have, the second is how it should be.

const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  events: [],
  plugins: {
    legend: { display: false },
    tooltip: { enabled: false },
    datalabels: {
      anchor: 'end',
      align: 'top',
      clip: false,
      color: (ctx) => (ctx.chart.data.labels[ctx.dataIndex] === today ? '#05F' : '#0C0055'),
      font: {
        family: 'Poppins',
        size: 11, // doesn't work
        weight: (ctx) => (ctx.chart.data.labels[ctx.dataIndex] === today ? '500' : 'normal'),
      },
      opacity: (ctx) => (ctx.chart.data.labels[ctx.dataIndex] === today ? 1 : 0.8),
      formatter: (value) => value,
    },
  },
  scales: {
    x: {
      position: 'bottom',
      grid: {
        borderDash: [9, 9],
        drawBorder: true,
      },
      ticks: {
        font: { family: 'Poppins', size: 11, weight: 500, style: 'normal' },
        color: 'rgba(12, 0, 85, 0.5)',
        lineHeight: 1.15,
      },
    },
    y: {
      beginAtZero: false,
      grace: '0%',
      min: newMinValue,
      max: newMaxValue,
      ticks: {
        stepSize: stepSize,
        callback: function (value) {
          return value.toFixed(1) + (isKg.value ? ' kg' : 'lbs')
        },
        font: { family: 'Poppins', size: 11, weight: 500, style: 'normal' },
        color: 'rgba(12, 0, 85, 0.5)',
        lineHeight: 1.15,
      },
      grid: { borderDash: [8, 8], drawBorder: false },
    },
  },
})

Maybe someone else knows how to change the size of the dots, because the labels and the y-axis change at once.