Shared tooltips do not work with Irregular Timeseries #420

jhuckaby · 2019-03-21T00:33:23Z

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.

The text was updated successfully, but these errors were encountered:

jhuckaby · 2019-03-21T00:41:02Z

Here is codepen created from your Irregular Timeseries demo code, but I adjusted all three series to start at the same timestamp, and have the same array length:

https://codepen.io/anon/pen/EMdpmN

As you can see, the shared tooltip works just fine in this case.

junedchhipa · 2019-03-21T13:53:22Z

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!

petericebear · 2019-12-02T14:12:33Z

Any updates on this? We have a similar issue in our graphs with 'missing' keys, but the days at the x-axes are equal.

junedchhipa · 2020-01-03T06:39:09Z

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
      }
    ]
  }
],

onli · 2020-01-20T00:37:50Z

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.

niklashaug · 2020-07-22T14:44:41Z

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

betaanish · 2020-07-27T19:01:44Z

i am stuck with this from past few days.....any update on this

betaanish · 2020-07-27T19:02:30Z

@junedchhipa ....please suggest any workaround

matthew-williamson-sd · 2020-07-28T08:22:35Z

@betaanish He's already suggested a workaround, just add the missing dates with null values

alfonsrv · 2020-11-02T18:15:05Z

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();
});

v360-eduardo-marques · 2020-11-17T12:03:52Z

facing the same problem here.

any chances it'll be fixed anytime soon?

Muqeet1 · 2021-04-15T07:42:48Z

The same issue here, any fix so far?

faizalami · 2021-06-15T05:16:10Z

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:

store the hovered x-axis series value (in this case is date time in integer form)
find and map the index of similar time from another x-axis series from w.globals.seriesX
print series value based on all x-axis points found with similar time
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>`;
    },

github-actions · 2021-11-13T14:26:24Z

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 · 2022-02-21T16:34:21Z

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.

dmitrypasyutin · 2022-06-23T20:18:27Z

@Splinter0 thanks a lot!
by the way, there should be

w.globals.yLabelFormatters[seriesEachIndex]

instead of

w.globals.yLabelFormatters[0]

placid2000 · 2022-10-26T09:57:17Z

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 ?

raoulspronck · 2023-02-24T14:21:01Z

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?

stalniy · 2024-03-26T02:13:08Z

the code above still may not work if corresponding XValue is not found in other series. This fixed code finds not only equal but the most close value on X axis to the one which was hovered. Obviously this works only with numbers (e.g., timestamps) on X axis. For me this is more than enough:

function customTooltip({ series, seriesIndex, dataPointIndex, w }) {
    const hoverXaxis = w.globals.seriesX[seriesIndex][dataPointIndex];
    const hoverIndexes = w.globals.seriesX.map((seriesX) => {
      let min = Math.abs(seriesX[0] - hoverXaxis);
      let minIndex = 0;
      for (let i = 1; i < seriesX.length; i++) {
        const v = Math.abs(seriesX[i] - hoverXaxis);
        if (v < min) { 
          min = v;
          minIndex = i;
        }
       }
      return minIndex
    });

    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}`;
}

sebgutierrez · 2024-05-22T08:19:37Z

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 worked really well for me! I had to modify this line so only the active series appear. Otherwise the hidden series value will show undefined.

hoverIndexes.forEach((hoverIndex, seriesEachIndex) => {
    if (hoverIndex >= 0 && w.globals.collapsedSeriesIndices.includes(seriesEachIndex) === false) { ... }

junedchhipa added the feature-request New feature or request label Mar 23, 2019

junedchhipa added the tooltip label Jan 3, 2020

bobheadxi mentioned this issue May 9, 2020

gobenchdata@v1 bobheadxi/gobenchdata#38

Merged

7 tasks

github-actions bot added the no-issue-activity label Nov 13, 2021

github-actions bot closed this as completed Nov 21, 2021

junedchhipa reopened this Feb 21, 2022

junedchhipa added bug Something isn't working and removed feature-request New feature or request no-issue-activity labels Feb 21, 2022

9r0x mentioned this issue Jun 6, 2022

Better support for irregular timeseries #3190

Closed

iz-maersk mentioned this issue Jun 28, 2023

Custom tooltip for ApexRangeAreaSeries error apexcharts/Blazor-ApexCharts#250

Open

stalniy mentioned this issue Mar 26, 2024

Shared tooltip not working with data_generator RomRider/apexcharts-card#593

Closed

4 tasks

arseniymlp mentioned this issue Apr 10, 2024

Series stroke line disappearing when first value is null apexcharts/react-apexcharts#591

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shared tooltips do not work with Irregular Timeseries #420

Shared tooltips do not work with Irregular Timeseries #420

jhuckaby commented Mar 21, 2019

jhuckaby commented Mar 21, 2019

junedchhipa commented Mar 21, 2019

petericebear commented Dec 2, 2019

junedchhipa commented Jan 3, 2020

onli commented Jan 20, 2020 •

edited

Loading

niklashaug commented Jul 22, 2020

betaanish commented Jul 27, 2020

betaanish commented Jul 27, 2020

matthew-williamson-sd commented Jul 28, 2020

alfonsrv commented Nov 2, 2020

v360-eduardo-marques commented Nov 17, 2020

Muqeet1 commented Apr 15, 2021

faizalami commented Jun 15, 2021

github-actions bot commented Nov 13, 2021

Splinter0 commented Feb 21, 2022 •

edited

Loading

dmitrypasyutin commented Jun 23, 2022

placid2000 commented Oct 26, 2022

raoulspronck commented Feb 24, 2023

stalniy commented Mar 26, 2024

sebgutierrez commented May 22, 2024

Shared tooltips do not work with Irregular Timeseries #420

Shared tooltips do not work with Irregular Timeseries #420

Comments

jhuckaby commented Mar 21, 2019

Codepen

Explanation

What is the behavior you expect?

What is happening instead?

What error message are you getting?

jhuckaby commented Mar 21, 2019

junedchhipa commented Mar 21, 2019

petericebear commented Dec 2, 2019

junedchhipa commented Jan 3, 2020

onli commented Jan 20, 2020 • edited Loading

niklashaug commented Jul 22, 2020

betaanish commented Jul 27, 2020

betaanish commented Jul 27, 2020

matthew-williamson-sd commented Jul 28, 2020

alfonsrv commented Nov 2, 2020

v360-eduardo-marques commented Nov 17, 2020

Muqeet1 commented Apr 15, 2021

faizalami commented Jun 15, 2021

github-actions bot commented Nov 13, 2021

Splinter0 commented Feb 21, 2022 • edited Loading

dmitrypasyutin commented Jun 23, 2022

placid2000 commented Oct 26, 2022

raoulspronck commented Feb 24, 2023

stalniy commented Mar 26, 2024

sebgutierrez commented May 22, 2024

onli commented Jan 20, 2020 •

edited

Loading

Splinter0 commented Feb 21, 2022 •

edited

Loading