apexcharts.js: Shared tooltips do not work with Irregular Timeseries

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.

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.

hey everyone, I think I got the solution, and perhaps this solution will works for any case

so the key is using the “w.globals” context, and I used this flow to generate a correct tooltip:

1. store the hovered x-axis series value (in this case is date time in integer form)
2. find and map the index of similar time from another x-axis series from w.globals.seriesX
3. print series value based on all x-axis points found with similar time
4. style the tooltip, you can format the hovered x-axis series value to readable date time format as tooltip title

custom: ({ 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 += `<span>${w.globals.seriesNames[seriesEachIndex]}: ${series[seriesEachIndex][hoverIndex]}</span><br />`;
        }
      });
      const formatHoverX = this.dateFormat(new Date(hoverXaxis), 'YYYY-MM-DD HH:mm:ss');

      return `<div class="card">
        <div class="card-header p-1">${formatHoverX}</div>
        <div class="card-body p-1">
          ${hoverList}
        </div>
      </div>`;
    },

By default, a shared tooltip is turned off in an irregular time-series. Until now, I haven’t found a solution that would work elegantly in this case, hence I turned it off programmatically.

I will visit that part of code once again to see how it goes, thanks!

facing the same problem here.

any chances it’ll be fixed anytime soon?

If the days at the x-axes are equal, you should create series with null values so that all series length stays equal.

series: [
  {
    data: [
      {
        x: new Date('17 Jul').getTime(),
        y: 20
      },
      {
        x: new Date('18 Jul').getTime(),
        y: 30
      },
      {
        x: new Date('19 Jul').getTime(),
        y: null
      }
    ]
  },
  {
    data: [
      {
        x: new Date('17 Jul').getTime(),
        y: null
      },
      {
        x: new Date('18 Jul').getTime(),
        y: 23
      },
      {
        x: new Date('19 Jul').getTime(),
        y: 98
      }
    ]
  }
],

Thank you @Splinter0 and @dmitrypasyutin . This solution temporary solves the problem. What I’m missing though, are the markers on each line when hovering. I think this might be related to the same issue.

Example: I would expect to have a marker on the green line as well:

Is there a way to improve this ?

Wouldn’t it maybe be possible to optionally show the y value at the line position, instead of the datapoint?

For context, in my example I only have data point when values are about to change or just changed. So the correct behaviour for a shared tooltip in those cases of an irregular timeseries would be to either show the y value of all series lines at the date, or to show the y value of the closest data point of each series.

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.

Does anyone have this solution for React apexcharts?

The suggested fix doesn’t work.

$(document).ready(function() {
    primary = [{
        x: "2020-01-05",
        y: null
    }, {
        x: "2020-10-01",
        y: 30
    }, {
        x: "2019-11-01",
        y: 15
    }, {
        x: "2020-11-02",
        y: 30
    }, ]
    secondary = [{
        x: "2020-01-05",
        y: 15
    }, {
        x: "2020-10-01",
        y: null
    }, {
        x: "2019-11-01",
        y: null
    }, {
        x: "2020-11-02",
        y: 30
    }, ]
    
    var options = {
        series: [{
            name: 'Primary',
            data: primary
        }, {
            name: 'Secondary',
            data: secondary
        }],
        chart: {
            type: 'line',
            stacked: false,
            height: 350,
            zoom: {
                type: 'x',
                enabled: true,
                autoScaleYaxis: true
            },
            toolbar: {
                autoSelected: 'zoom'
            }
        },
        dataLabels: {
            enabled: true
        },
        markers: {
            size: 0,
        },
        title: {
            text: 'Sample Series',
            align: 'left'
        },
        yaxis: {
            labels: {
                formatter: function(val) {
                    return val;
                },
            },
            title: {
                text: 'Amount'
            },
        },
        xaxis: {
            type: 'datetime',
        },
        tooltip: {
            shared: true,
            y: {
                formatter: function(val) {
                    return val;
                }
            }
        }
    };
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
});

@junedchhipa can we expect an official fix for this sometime?