Help with custom tooltip improvements

[Dhiraj Bodicherla <db...@gitlab.com.INVALID>]

Hi all,

We want to display a custom tooltip on the time series charts as the mouse hovers over the chart. To achieve that we're using the xAxis' axisPointer label formatter to get the data point where mouse is currently hovered in combination with the mouseout and mouseover listeners on the chart DOM (chart.getDom().addEventListener('mouseout', ....) to determine if the hover is within the chart area. While this enables us to display custom tooltips, it is slowing the page a lot when there are about 10 charts.

Question: Is there a better way to solve this problem to avoid slowness? Additionally, we have more mouse listeners on the chart to display the custom tooltip for markPoints (I'll ask about this in a separate thread) which overall slows everything down.

Below is a sample code to better illustrate how we're attempting to show custom tooltips.

chart.getDom().addEventListener('mouseout', function(mouseEvent) {
   showTooltip = chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
   tooltipPosition = {
      left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
      top: `${mouseEvent.zrY}px`,
   };
});

xAxis: {
  axisPointer: {
    show: true,
    label: {
      formatter: function(value) {
            tooltipContent = getTooltipContentFromValue(value);
      },
    },
  },
}


Any kind of pointers will help us a lot. Thanks for the awesome work!

Dhiraj

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org