Como criar uma dica de ferramenta multicategoria que mostre o estado atual de todas as categorias de um gráfico de Gantt?

Estou trabalhando em um gráfico de Gantt. Ele se parece com isso:

Aqui está o código:

// Create a new Map
const modeColors = new Map();

// Adding entries to the map
modeColors.set(0, 'brown');
modeColors.set(1, 'lightgrey');
modeColors.set(2, '#ffa500');
modeColors.set(3, '#663300');

// Create a new Map
const statusColors = new Map();

// Adding entries to the map
statusColors.set(0, '#32cd32');
statusColors.set(1, 'lightblue');
statusColors.set(2, 'yellow');

const delayColors = new Map();
delayColors.set(0, '#32cd32');
delayColors.set(1, 'darkred');
delayColors.set(2, '#3399ff');
delayColors.set(3, 'crimson');

function getColor(categoryIndex, stateIndex) {
  switch (categoryIndex) {
    case 0:
      return modeColors.get(stateIndex);
    case 1:
      return statusColors.get(stateIndex);
    case 2:
      return delayColors.get(stateIndex);
    default:
      return '#777777';
  }
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '180em',
    right: '40em',
    height: '30%',
    top: '55%'
  },
  xAxis: {
    name: 'Time',
    type: 'time',
    id: 'time',
    position: 'bottom',
    min: '2025-04-14 06:00:00',
    max: '2025-04-14 22:00:00',
    nameLocation: 'middle',
    nameGap: 25
  },
  yAxis: {
    type: 'category',
    data: ['Mode', 'Status', 'Delay'],
    name: 'ganttCategoryAxis',
    axisTick: { show: false },
    splitLine: { show: true },
    inverse: true,
    nameTextStyle: { fontSize: 0 }
  },
  series: [
    {
      type: 'custom',
      encode: {
        x: [0, 1],
        y: 2
      },
      data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0],
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1],
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2],
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3],
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0],
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1],
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2],
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0],
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1]
      ],
      renderItem: renderGanttItem
    }
  ]
};

function renderGanttItem(params, api) {
  var categoryIndex = api.value(2);
  var stateIndex = api.value(3);
  var timeArrival = api.coord([api.value(0), categoryIndex]);
  var timeDeparture = api.coord([api.value(1), categoryIndex]);
  var barLength = timeDeparture[0] - timeArrival[0];
  var barHeight = 30;
  var x = timeArrival[0];
  var y = timeArrival[1] - barHeight / 2;
  var color = getColor(categoryIndex, stateIndex);

  return {
    type: 'rect',
    shape: {
      x: x,
      y: y,
      width: barLength,
      height: barHeight
    },
    style: {
      fill: color,
      opacity: 0.66,
      stroke: 'black'
    }
  };
}

Possui 3 categorias: Modo, Status e Atraso. No momento, a dica de ferramenta exibe uma lista de todos os elementos da categoria específica. Quero criar uma dica de ferramenta com vários estados de categorias que mostre o estado atual de todas as categorias (modo, status, atraso) em um horário específico. Por exemplo, quando eu passar o mouse em 12:20, ela deverá exibir:

Mode - 1
Status - 2
Delay - 1

Porque esses 3 elementos de dados (um de cada categoria) estavam ativos às 12:20:

data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0]
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1] //FIRST ONE
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2]
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3]
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0]
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1]
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2] // SECOND
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0]
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1] // THIRD
      ]

Tentei adicionar um formatador personalizado:

formatter: function (params) {
    /* Iterating over all elements and displaying the element when the mouse-hover time is within the element's start and end time */
    }

O problema é que quando itero sobre todos os parâmetros, consigo ver apenas os elementos que já estão dentro da categoria para onde o mouse está apontando no momento.