When zooming in the x-axis, a shared tooltip displays incorrect data

[lunarkbot]

Description

If on the Column Chart we use tooltips with the "shared" property turned on and apply the zoomX method to the chart, in which the first parameter is any value along the X axis higher than 1. Then, when we hover over the first column, we will see incorrect data in the tooltip: Data from the very first column of the graph will always be displayed, regardless of which column is actually the first after zooming.

Steps to Reproduce

1. As a basis, I took an example from the official Apexchart website.
2. We need to change the chart properties for the zoom and shared tooltips to work.
   Let's add some properties.

chart: {
      type: 'bar',
      height: 350,
      width: 350, // added
},
xaxis: {
      type: 'category', // added
      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
      tickPlacement: 'on', // added
      tickAmount: 9, // added
},
tooltip: { // added
      enabled: true,
      intersect: false,
      shared: true,
},

3. Let's apply the zoomX method to the chart.

chart.zoomX(4, 8)

4. Now hover your mouse over the first column of the chart to see the tooltip with incorrect data.

Expected Behavior

When hovering over the first column after zooming, display in the tooltip the data corresponding to the selected chart column.

Actual Behavior

When hovering over the first column of the chart after zooming, the tooltip always displays the data of the very first column of the chart.

Screenshots

Reproduction Link

https://codepen.io/lunarkbot/pen/zYjVPYa

[Skrypt]

I can repro the same issue by simply zooming on a mixed chart sample.

As you can see we are hovering on the chart bar when fully zoomed in and it displays the previous element tooltip instead when moving the mouse in different places that are still on top of that chart bar.

I'm going to debug the source code of this lib and try to fix it. Let me know if you have any hints where to look at.

@junedchhipa

[Skrypt]

Fixed this by removing this.create(e, this, firstVisibleSeries,j ,optio.ttItems) in 2 different places.

Here is what I did :

[Skrypt]

To be honest, I'm not sure why these bars don't have a mouseover event set on them simply instead of looking at the mouse cursor and opening the tooltips when hovering them. Maybe SVG limitation.

[Skrypt]

So, after digging more the issue seems to come from the getNearestValue and closestInMultiArray methods where sometimes the returned currIndex will be null which cause the Tooltip to fallback to the first element possible in the array of Tooltips.

But, that's mainly caused by the fact that the "hover" is evaluated by doing Math.abs() to determine if we are close to the center point of a bar or closer to the next element. When we are zooming up to the point where we see only one bar then it should not need to evaluate this but so far I've not found how to entirely fix the issue when moving the mouse pointer outside of the bar element.

[Skrypt]

@junedchhipa Pinging you again on this one. Would you take a PR if we were proposing a fix for this issue (sponsored by employer)? I would probably create a different way to show these tooltips other than evaluating the nearest one. If I'm looking at Plotly as an example here:

https://plotly.com/python/graphing-multiple-chart-types/

You can see that these tooltips are shown only when doing a mouseover. But of course, there is no set of tooltips that are shown at the same time making this easier.

I would suggest having an alternate way of showing these tooltips and having this configurable on the tooltip config itself. Basically, not evaluating the nearest element, but show tooltips on the hover of individual items simply.

Also, another way to fix this is to create a zone that will wrap the bar/lines like done here with the ECharts as an example :

https://echarts.apache.org/examples/en/editor.html?c=mix-line-bar

This way you don't need to evaluate nearest element you just have a mouseover event to deal with.