Tool Tip values showing NaN in date time x-axis when disabled legends in multi series line chart with straight line

[Babyshalini1995]

Bug report

Tool Tip values showing NaN in date time x-axis when disabled legends in multi series line chart with straight line. I am using React with Apex Line chart data. Given below the sandbox link.

Codepen

https://codesandbox.io/s/dawn-dream-wllul

Explanation

When I disable legends for series with more data points and observe the tooltip for series with less data point, tooltip value shows NaN

This happens mostly with the series data points with straight line

• What is the behavior you expect?
  ToolTip values should appear.
• What is happening instead?
  Showing NaN when legends are disabled
• What error message are you getting?
  NaN values are displayed. No error message is displayed..

Any help would be appreciated if I am missing on something or if this is an issue?

Thanks,
Shalini!

[jasmynn]

You can handle this on formatter of you x or y axis. See code below:

   tooltip: {
            shared: true,
            intersect: false,
            x: { format: 'MMMM dd yyyy HH:mm' },
            y: {
                formatter: function (val) {
                    if (typeof val !== "undefined" && val != null && isNaN(val) === false) {
                        return val.toFixed(0);
                    }
                    return null;
                },
            },

        },

[Babyshalini1995]

@jasmynn - Thanks for your suggestion. It may work when we need to handle undefined values.

The issue is not about handling undefined values. Even if it has values, the value is returned as undefined when legends are disabled.

Please look at the sandbox link and disable legends and observe the tool tip. For x-axis(Date time), it has values when all the legends are there. When the legends are disabled, the value is returned as undefined, where it should return date time.

[cola119]

@junedchhipa I have the same issue. This is a critical issue that needs to be investigated as soon as possible.

[cola119]

@junedchhipa When we investigated the cause of the problem, we found that seriesHaveSameValues was the problem.

apexcharts.js/src/modules/tooltip/Utils.js

Lines 180 to 187 in db64a00

	if (
	firstActiveSeriesIndex[a] !== -1 &&
	total !== 0 &&
	!coreUtils.seriesHaveSameValues(a)
	) {
	activeIndex = firstActiveSeriesIndex[a]
	break
	}

example data

const series = [
  { name: 'data1', data: [0, 1, 1, 3, 4, 2] },
  { name: 'data2', data: [1, 1, 1, 1, 1, 1] } // straight line
]

The multi-series line chart with straight-line matches coreUtils.seriesHaveSameValues so this if statement condition will befalse and will be ignored. As a result, activeIndex always becomes 0(initial value). In fact, it has to be 1.

apexcharts.js/src/modules/tooltip/Utils.js

Lines 134 to 145 in db64a00

	if (w.globals.series.length > 1) {
	activeIndex = this.getFirstActiveXArray(Xarrays)
	} else {
	currIndex = 0
	}
	let currY = Yarrays[activeIndex][0]
	let currX = Xarrays[activeIndex][0]
	let diffX = Math.abs(hoverX - currX)
	let diffY = Math.abs(hoverY - currY)
	let diff = diffY + diffX

In this situation, let currX = Xarrays[activeIndex][0] becomes undefined, all subsequent logic breaks down...

[jasmynn]

Welcome thank you for your hard work!

…

On Wed, Apr 29, 2020, 7:59 PM Baby shalini ***@***.***> wrote: @jasmynn <https://github.com/jasmynn> - Thanks for your suggestion. It may work when we need to handle undefined values. The issue is not about handling undefined values. Even if it has values, the value is returned as undefined when legends are disabled. Please look at the sandbox link and disable legends and observe the tool tip. For x-axis(Date time), it has values when all the legends are there. When the legends are disabled, the value is returned as undefined, where it should return date time. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1448 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF2TGJXLKUULHZD375T3PHLRPAJD3ANCNFSM4LWSZH5Q> .