1. Home
  2. Forum
  3. Blazor
  4. Mouse events trigger incorrectly on Chart Annotations

Mouse events trigger incorrectly on Chart Annotations

Hello,

I'm working with the chart compoonent on latest 19.2.0.47. I want to have custom markers, but I believe that Marker template in the scatter plot is not supported like it is on the Map component.

As an alternative I'm using Chart Annotations as the points. I'd like to trigger events for "mouseover" and "mouseout "

The problem is that these events do not work correctly within the chart. Instead of proper behavior, the "mouseover" event is triggered with every movement of the mouse, and the "mouseout" event is overlooked


To demonstrate this, I made some code to compare the mouse actions for a span (a) inside the chart vs (b) outside the chart. As you can see, (a) is not working as expected, but (b) works just fine.

I also attached the code.
Seems to me like a bug. Any advice is appreciated.




Example of the behavior when moving the mouse over the points:


Attachment: ScatterComponent_d452c151.zip

9 Replies
DG Durga Gopalakrishnan Syncfusion Team July 16, 2021 03:55 PM UTC

Hi Sorin, 

Greetings from Syncfusion. 

You can customize the scatter marker using ChartMarker properties itself and we have two events related to marker OnPointRender which is triggered while rendering the point and OnPointClick which will be triggered while clicking the marker.  

<ChartSeries Visible="true" XName="Latitude" YName="Longitude" Type="ChartSeriesType.Scatter"> 
         <ChartMarker Visible="true" Height="20" Width="20"> </ChartMarker>       
</ChartSeries> 

 


UG : 

If provided solution doesn’t meet your requirement, please revert us. 

Regards, 
Durga G 


SO Sorin July 16, 2021 07:49 PM UTC

Hello Durga,

Thank you for your quick reply!
Unfortunately the limited customization of just height and width of the marker are not enough for my application.
Ideally what I need is a Marker Template capability, similar to the maps marker template (link).
That way I can customize my markers more than just the shapes currently available.

The primary objective is to achieve event triggers when @onmouseover and @onmouseout for the markers.
Even with the default marker, these mouse events I need are not supported.

But that's where I can workaround this limited marker by using the Chart Annotations as alternative to the markers.
By using the Chart Annotation, I can take advantage of the @onmouseover and @onmouseout events.

But the problem is that these events do not work properly from within the scatter plot.
From outside the scatter plot it works fine, but something about putting it within the scatter plot causes improper event triggering. That's what I proved with the attachment on my original post.

Could you try to reproduce the behavior from my attached code?

I believe the correct behavior would be for the event triggers to behave the same way either inside or outside the chart.

Thank you!


DG Durga Gopalakrishnan Syncfusion Team July 19, 2021 12:31 PM UTC

Hi Sorin, 

We have validated your reported scenario. We have considered this as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 3rd August 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 
 

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, 
Durga G 


BP Baby Palanidurai Syncfusion Team July 30, 2021 03:24 PM UTC

Hi Sorin, 

Thanks for your patience. 

We have checked further on this scenario. We have noticed that chart re rendering for each mouse in annotations mouseover. As of now, false the shouldRender on stop the re rendering charts. We will improve this scenario and include in our volume 3 main release which is expected to be rolled out at end of September 2021. We will let you know once our release is rolled out. 

Code snippet: 
protected override bool ShouldRender() { 
      return false; 
    } 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AnnMouseMove229434102799945033.zip 
Regards, 
Baby. 


SO Sorin August 4, 2021 01:02 PM UTC

Hello Baby,

Thank you for the reply. 

I tried adding the code snippet and I confirmed that the "mouseover" and "mouseout" events do work as intended this way.


However there is a side effect. 
My extended purpose of using the "mouseover" and "mouseout" events is to update annotations on the chart to highlight the point which was hovered over. By hardcoding "ShouldRender" to false, it blocks the proper updating of the annotations.

Fortunately I've found a workaround for this side effect.
The solution is to keep track of whether the "mouseover" is currently ongoing, and set "ShouldRender" to false only during that period.



I will continue to use this workaround until the volume 3 main release.

Thank you!


DG Durga Gopalakrishnan Syncfusion Team August 5, 2021 02:52 PM UTC

Hi Sorin, 

Thanks for an update. As of now, we request you to work with the provided work around. We will include this improvement as per mentioned timeline. We appreciate your patience until then. 

Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team October 4, 2021 02:33 PM UTC

Hi Sorin, 

We are glad to announce that our Essential Studio 2021 Volume 3 release v19.3.0.43 is rolled out and is available for download under the following link. 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G 


SO Sorin October 5, 2021 01:19 AM UTC

Hello Durga,

Thank you so much for the update, I confirmed that it is working as expected now!

Sorin


DG Durga Gopalakrishnan Syncfusion Team October 5, 2021 06:49 AM UTC

Hi Sorin, 
  
Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 
  
Regards, 
Durga G 


Loader.
Up arrow icon