how to create a chart with a callback function for the x-axis if the values are numbers?

I try to create a line-chart with numbers for the x-axis (the ‘kw’ value), but it only works if the value is in string format. I use a callback function to add a string to the value in the legend. How can I create the chart with numbers from the data and add a string to it for the legend?
I hope you can see in my example what I mean.

With String:

var dString = [{
    kw: '1',
    wert: 120
  },
  {
    kw: '2',
    wert: 125
  },
  {
    kw: '3',
    wert: 110
  }
];

var dNumber = [{
    kw: 1,
    wert: 120
  },
  {
    kw: 2,
    wert: 125
  },
  {
    kw: 3,
    wert: 110
  }
];


dia(dString, 'dia');
dia(dNumber, 'dia2');


function dia(d, id) {
  var configDia = {
    data: {
      datasets: [{
        type: 'line',
        label: 'Ist',
        data: d,
        parsing: {
          xAxisKey: 'kw',
          yAxisKey: 'wert'
        }
      }]
    },
    options: {
      scales: {
        x: {
          ticks: {
            display: true,
            callback: function(value, index, ticks) {
              return `KW ${this.getLabelForValue(value)}`;
            }
          }
        },
        y: {
          ticks: {
            callback: function(value, index, ticks) {
              return value + '%';
            }
          }
        }
      }
    }
  };

  var ctx = document.getElementById(id);
  var myChart = new Chart(ctx, configDia);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas id="dia"></canvas>
<canvas id="dia2"></canvas>