Shared tooltips do not work with Irregular Timeseries

First of all, thank you for an awesome chart library. I absolutely love ApexCharts!

Codepen

This issue is actually illustrated perfectly on your Irregular Timeseries demo page, so no codepen is required:

https://apexcharts.com/javascript-chart-demos/area-charts/irregular-timeseries/

This demo has the following configuration for the tooltip:

tooltip: {
	shared: true
},

However, as you can see in the demo, the tooltips are not showing as shared, even if you hover over a point intersecting multiple series. Instead, it only shows a single series in the tooltip. Screenshot:

Explanation

What is the behavior you expect?

I expect that when tooltip.shared is set to true, that all intersecting series will show in the tooltip hover. This is indeed the case when all series start at the same timestamp (i.e. a “regular” timeseries).

What is happening instead?

The tooltip hover is only showing one single series (the nearest one), even though multiple series intersect the X position of the mouse.

What error message are you getting?

There is no error message. This is just a visual issue.

I’ve noticed that when all my series data starts at the same timestamp (i.e. regular, not irregular) the shared tooltip works just fine. This issue only occurs when one or more of the series starts at a different timestamp, as shown in your Irregular Timeseries demo.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Splinter0]

Hello everyone, follow up on the comment by @faizalami , this is my implementation to fix the issue. For context, I use the Vue wrapper.

        customSharedTooltip({ series, seriesIndex, dataPointIndex, w }) {
            const hoverXaxis = w.globals.seriesX[seriesIndex][dataPointIndex];
            const hoverIndexes = w.globals.seriesX.map((seriesX) => {
                return seriesX.findIndex((xData) => xData === hoverXaxis);
            });

            let hoverList = "";
            hoverIndexes.forEach((hoverIndex, seriesEachIndex) => {
                if (hoverIndex >= 0) {
                    hoverList += `
                        <div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex;">
                            <span class="apexcharts-tooltip-marker" style="background-color: ${
                                w.globals.markers.colors[seriesEachIndex]
                            };"></span>
                            <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                                <div class="apexcharts-tooltip-y-group">
                                    <span class="apexcharts-tooltip-text-y-label">${
                                        w.globals.seriesNames[seriesEachIndex]
                                    }: </span>
                                    <span class="apexcharts-tooltip-text-y-value">${w.globals.yLabelFormatters[0](
                                        series[seriesEachIndex][hoverIndex]
                                    )}</span>
                                </div>
                            </div>
                        </div>`;
                }
            });
            const parsed = new Date(hoverXaxis)
                .toDateString()
                .split(" ")
                .slice(1);
            return `<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">${
                parsed[1] + " " + parsed[0] + " " + parsed[2]
            }</div>${hoverList}`;
        },

This is the method I defined, this way the rendering for the tooltip is identical to the default tooltip used by Apex. I really think this issue should be addressed in upstream.