echarts

How to create a multi-category tooltip that shows the current state for all categories of a Gantt chart?

I'm working on a Gantt chart. It looks like this:

Gantt chart

Here is the code:

// 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'
    }
  };
}

It has 3 categories - Mode, Status and Delay. Right now tooltip displays list of all elements of the particular category. I want to create a multi-category state tooltip that shows the current state for all categories (mode, status, delay) at a specific time, for example when I hover at 12:20 it should display:

Mode - 1
Status - 2
Delay - 1

Because these 3 data elements (one from each category) were active at 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
      ]

I've tried to add custom formatter:

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 */
    }

The problem is that when I iterate over all params I can see only elements that are already within the category, where the mouse is currently pointing.

Solution

  • I came up with a solution which is slighty inaccurate. Since the tooltip formatter does not provide the exact mouse position, its possible to use the tooltip position property for that. The drawback of this method is that the position callback is executed after the formatter callback, such that the position for calculating the current states comes from a previous iteration and is thus not 100% accurate.

    Example:

    tooltip: {
    position: (point, param) => {
        const cursorTime = myChart.convertFromPixel({xAxisIndex: 0}, point[0]);
        tooltipData = {};
        for (let item of data) {
            if (new Date(item[0]) <= cursorTime && new Date(item[1]) >= cursorTime) {
                tooltipData[String(item[2])] = item[3];
            }
        }
    },
    formatter: params => {
        let tooltipStr = '';
        if (tooltipData['0'] !== undefined) tooltipStr += 'Mode - ' + tooltipData['0'] + '<br>';
        if (tooltipData['1'] !== undefined) tooltipStr += 'Status - ' + tooltipData['1'] + '<br>';
        if (tooltipData['2'] !== undefined) tooltipStr += 'Delay - ' + tooltipData['2'] + '<br>';
        return tooltipStr;
    }
}