Chart.js display data labels as integers on x axis

Question

I am working on a chart which reads data from a .csv file and displays the emisivities of four surface types against wavelenghts between 3.660 and 14.559. Example of my source dataframe (in total 531 observations):

x1,x2,y_oakface,y_clybrkcm,y_distd_wn,y_sndpgaz1
3.66027,2732.04,0.965892,0.531653,0.974703,0.710034
3.66544,2728.18,0.965664,0.525966,0.974765,0.703811
3.67063,2724.32,0.968696,0.527477,0.974827,0.709377

...

14.397,694.587,0.975169,0.976188,0.960436,0.982283
14.4775,690.728,0.974855,0.975476,0.959794,0.984235
14.5588,686.869,0.973462,0.977953,0.959163,0.981849

I managed to get the graph working by using the values in x1 column as labels:

I would like to have the x axis labels displayed as integers between 3-14. What is the best way to go about this? See my code below.

d3.csv("data/emisdata2.csv").then(makeChart);


// Plot the data with Chart.js
function makeChart(emisdata) {
  var wlLabels = emisdata.map(function (d) {
    return d.x1;
  });
  var oakData = emisdata.map(function (d) {
    return d.y_oakface;
  });
  var brickData = emisdata.map(function (d) {
    return d.y_clybrkcm;
  });
  var soilData = emisdata.map(function (d) {
    return d.y_sndpgaz1;
  });
  var waterData = emisdata.map(function (d) {
    return d.y_distd_wn;
  });

  const data = {
    labels: wlLabels,

    datasets: [
      {
        label: "Oak leaf",
        data: oakData,
        borderColor: "green",
        backgroundColor: 'rgba(0, 77, 0, 0.5)',
        pointStyle: false,
      },
      {
        label: "Clay brick",
        data: brickData,
        borderColor: "red",
        backgroundColor: 'rgba(255, 0, 0, 0.5)', 
        pointStyle: false,
      },
      {
        label: "Sandy soil",
        data: soilData,
        borderColor: 'rgba(139, 69, 19, 1)',
        backgroundColor: 'rgba(139, 69, 19, 0.5)', 
        pointStyle: false,
      },
      {
        label: "Distilled water",
        data: waterData,
        borderColor: 'blue',
        backgroundColor: 'rgba(0, 0, 255, 0.5)', 
        pointStyle: false,
      }
    ]
  }
  const config =  {
    type: "line",
    data: data,
    options: {
        responsive: true,
        plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Interactive feature 2',
            },
          },
          scales: {
            x: {
              display: true,
              title: {
                display: true,
                text: 'Wavelength (micrometer)', // X-axis label
              },
              ticks:{
                stepSize: 1,
                precision: 0,

              }
            },
            y: {
              display: true,
              title: {
                display: true,
                text: 'Emissivity', // Y-axis label
              },
              
              suggestedMax: 1,
            },
          },
      
    }
}
  var chart = new Chart("myChart", config)}

I tried playing around with the tick configuration and also defining the x axis manually but neither worked. When I remove the labels the lines disappear.