chart.js datalabel over x-axis

Question

chart error

I have an issue while using chart.js. I set initial data to show on chart. (from 0 index to 15 index of data), the datalabel of line chart is over the X-Axis after drawing chart.

Here is my code.

<Chart
  type="bar"
  height={500}
  options={{
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x',
          threshold: 10,
        },
        zoom: {
          wheel: {
          enabled: true,
          speed: 0.3,
        },
        pinch: {
           enabled: true,
        },
        mode: 'x',
       },
      },
     },
     maintainAspectRatio: false,
     responsive: true,
     layout: {
       padding: 10,
     },
     scales: {
       xAxis: {
         stacked: true,
         min: 0,
         max: 15,
       },
       yAxis: {
         stacked: true,
         beginAtZero: true,
         title: {
           display: true,
         },
         ticks: {
           maxTicksLimit: 10,
         },
         min: 0,
         afterDataLimits: scale => {
           scale.max = scale.max * 1.2;
         },
       },
     },
   }}
  data={{
    labels: xAxisNameList, // ex : ['2023.01.25', '2023.01.26']
    datasets: dataSetList, // 
  }}
/>

And This is my data set list.

const dataSetList: any[] = [
  {
    data: data,
    datalabels: {
      align: 'end',
      anchor: 'start',
      display: true,
    },
  },
  {
    label: `...`,
    data: data,
    parsing: {
      yAxisKey: `...`,
    },
    datalabels: {
      anchor: 'end',
      align: 'start',
      clamp: true,
      display: true,
   },
  },
];

And here is my package.json

  "chart.js": "^3.9.1",
  "chartjs-plugin-datalabels": "^2.2.0",
  "chartjs-plugin-zoom": "^2.0.0",
  "react-chartjs-2": "^4.3.1"

I want to datalabels inside chart graph Whenever I zoom or pan this chart.