I'm using chartjs-plugin-datalabels to show values on chart, but the labels are not centered. The main part is in the datasets.datalabels where I can override default settings, which sets to center anyway, but wanted to show where its done. I have tried positione it to the right, but as the value getting bigger, the datalabel is less centered.

Chart.register(ChartDataLabels);

const data_tafkidim_cat_count = {
  labels: window.TafkidimCatCount.map((el) => el.TafkidCat.split(' ')).slice(0, pagination['tafkidim_cat_count'].show),
  datasets: [
    {
      data: window.TafkidimCatCount.map((el) => el.Total),
      backgroundColor: Setcolors(),
      borderColor: Setcolors(1),
      borderWidth: 1,
      datalabels: {
        anchor: 'center',
        align: 'center',
      },
    },
  ],
};
const config_tafkidim_cat_count = {
  type: 'bar',
  data: data_tafkidim_cat_count,
  options: {
    scales: {
      x: {
        grid: {
          borderColor: '#829AB1',
        },
        ticks: {
          color: '#627D98',
        },
        reverse: true,
      },
      y: {
        grid: {
          borderColor: '#829AB1',
        },
        beginAtZero: true,
        ticks: {
          color: '#627D98',
        },
      },
    },
    plugins: {
      title: {
        text: TL['tafkidim_cat_count'],
        padding: {
          bottom: 20,
        },
      },
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          title: (context) => {
            return context[0].label.replaceAll(',', ' ');
          },
        },
      },
    },
  },
};
const tafkidim_cat_count = new Chart('#tafkidim-cat-count'.Element().getContext('2d'), config_tafkidim_cat_count);