Wrong Y-Value Display in Shared Tooltips for Multiple Line Charts

[Aruna]

Hi,

I'm trying to use a Shared tooltip for a multiple line type chart. However, the shared tooltip displays inaccurate values that don't correspond to a specific x value, as shown in the sample below.

How can I prevent incorrect y values from displaying for a given x value in the shared tooltip?

Sample code :
https://stackblitz.com/edit/angular-fiprex-gddtjg?file=src%2Fapp.component.html,src%2Fapp.component.ts

[Nishanthi Panner Selvam]

Hi Aruna,

Greetings from Syncfusion.

We have analyzed your reported scenario. By default, the shared tooltip includes the nearest data points. However, if you prefer to exclude the nearest value from the tooltip, we suggest you to set showNearestPoint to false.

We have attached screenshot, code-snippet and screenshot.

Code-snippet:

   public tooltip: Object = {

        enable: true,

        shared: true,

        showNearestPoint: false,

    };

Screenshot:

Sample: https://stackblitz.com/edit/angular-fiprex-hfaewt?file=src%2Fapp.component.html

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Aruna]

Hi Nishanthi,

When disabling the  showNearestPoint, It only displays one series value at a time. 

How can I configure the shared tooltip to displays all the y-values for a given x-value across all chart series? Please see the example screenshot below for expected result.

Regards,

Aruna.

[Nishanthi Panner Selvam]

Aruna,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on January 2, 2024. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback: https://www.syncfusion.com/feedback/49370/when-we-disable-shownearestpoint-the-shared-tooltip-does-not-work

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

As of now, we recommend using the sharedTooltipRender event. By implementing this event, you can achieve the desired behavior by assigning an empty string to the last text in the tooltip. The provided code snippet demonstrates this approach:

Code-snippet:

public sharedTooltipRender(args) : void {

    if (!(args.point[0].x.getTime() === new Date(2000, 1, 1).getTime())) {

      args.text[3] = '';

    }

}

Screenshot:

Sample: https://stackblitz.com/edit/angular-fiprex-annxtd?file=src%2Fapp.component.ts

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Aruna]

Hi Nishanthi,

Thank you for the feedback, further I encountered below issue.

Enabling tooltips also causes the crosshair to overlap by the area series. Turning off tooltips fixes this

crosshair overlapping.

Could you please assist on this concern?

Reproduceable Code sample:

https://stackblitz.com/edit/github-sa8dz6?file=src%2Fapp.component.ts

Regards,

Aruna.

[Nishanthi Panner Selvam]

Aruna,

We have analyzed your reported query based on that by default crosshair will be overlapped by area series when tooltip is enabled and this is actual behavior.

However, we have considered your reported scenario as improvement and logged a feature request on this. Based on other logged tasks priority, we will include this improvement in any of our upcoming release. You can keep track of an improvement from the feedback portal below. 

Feedback: https://www.syncfusion.com/feedback/49411/need-to-provide-support-to-order-the-crosshair-based-on-user-preference

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Nishanthi

[Nishanthi Panner Selvam]

Aruna,

Thank you for your patience

We have included the fix for the reported scenario in our weekly patch release (v 24.1.44) . You can download the latest package from the below link

https://www.npmjs.com/~syncfusionorg

You can upgrade your package to the latest version to resolve the reported scenario.

Please get back to us, if you need any further assistance.

Regards,

Nishanthi