ChartJS indexing for datapoints

Question

I have a program that tries to label a datapoint when its clicked on by the index that its on. I have two x-axes, so it's a little confusing. However, the first dataset (x1) is being labeled, but the second one (x2) isn't being labeled. I have tried to log it but nothing comes up. Is there any solution?

Here is the whole chart's code:

const data = {
  //labels: ['Younger Than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
  
  datasets: [{
      label: 'Races/Ethnicities Invlolved',
      data: [
        109, 1289, 245, 16, 7
      ],
      backgroundColor: 'rgba(255, 26, 104, 0.2)',
      borderColor: 'rgba(255, 26, 104, 1)',
      tension: 0.4,
      yAxisID: 'y'     
  }, 
  {
      label: 'Ages Invlolved',
      data: [
        161, 746, 534, 202, 23
      ],
      backgroundColor: 'rgba(0, 26, 104, 0.2)',
      borderColor: 'rgba(0, 26, 104, 1)',
      tension: 0.4,
  }]
};

const config = {
  type: 'line',
  data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
        type: 'linear',
        position: 'left'
      },
      x1: {
        labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
      },
      x2: {
        position: 'top',
        labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
      },
    },
    plugins: {
      tooltip: {
        callbacks: {
          title: function(tooltipItems) {
            const datasetIndex = tooltipItems[0].datasetIndex;
            const datasetLabel = config.data.datasets[datasetIndex].label;
            
            return datasetLabel;
          },
          label: function(context) {
            console.log(context);

            const datasetIndex = context.datasetIndex;
            const datasetLabel = config.data.datasets[datasetIndex].label;
            const value = context.parsed.y;
            let xLabel;
        
            if (datasetLabel === 'Races/Ethnicities Invlolved') {
                xLabel = config.options.scales.x1.labels[context.dataIndex];
            } else if (datasetLabel === 'Ages Involved') {
                const dataIndex = context.dataIndex;
                console.log(dataIndex);
                if (dataIndex === 0) {
                  xLabel = 'Younger than 18';
                } else if (dataIndex === 1) {
                  xLabel = '18-30';
                } else if (dataIndex === 2) {
                  xLabel = '31-45';
                } else if (dataIndex === 3) {
                  xLabel = 'Older than 45';
                } else {
                  xLabel = 'Unknown';
                }
            }
            return `${xLabel}: ${value}`;
          } 
        }
      }
    }
  }
};







// render init block
const myChart = new Chart(
  document.getElementById('chart'),
  config
);

myChart.legend.options.onClick = function(event, legendItem) {
  const datasetIndex = legendItem.datasetIndex;
  const meta = myChart.getDatasetMeta(datasetIndex);
  const metaIndex = meta.index;

  if (datasetIndex === 2) { 
    if (myChart.data.datasets[metaIndex].label === 'Ages Involved') {
      myChart.data.datasets[metaIndex].label = 'Race/Ethnicity Involved';
    } else {
      myChart.data.datasets[metaIndex].label = 'Ages Involved';
    }
    myChart.update();
  }
};


// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;