Line annotations with touch event handling

[Piotr]

Hello,

I'm working on an application that uses SfChart line chart to display some data and I want to create some functionality using vertical line annotations. My application uses MVVM. What I want to achieve is:

1. User can add new annotation by pressing button above the chart.

2. The annotation will appear in the center of the chart.

3. User can hold annotation and adjust its position by dragging it left or right.

I have two problems with point 3.

The first is that I have to touch the annotation line very precisely (I tested it on the emulator and I have to click exactly on the annotation line, I can't miss it even by one pixel). In theory this behavior is clear, but in practice it is really difficult to catch a thin line with your finger. Is it possible to make the area considered as annotation wider when detecting a touch event (or do something else to make annotation touch usable)?

Second problem is that when I touch the annotation and try to move it, the line is slightly offset from my finger (or mouse pointer on emulator). I tried to convert pointX value passed to OnTouchMove method of ChartAnnotation class to XAxis.PointToValue method, but it's still offset. I think the offset value is the width of the Y axis with labels. Is it possible to correct this to make line follow finger position?

I have attached simple project which shows my implementation. Could you help me to solve the problems I have described above?

Attachment: SfChartSample_e12a52f2.zip

[Sowndharya Selladurai]

Hi Piotr,

 

We are validating your query and we will update our response before the end of today, Thursday, April 6th.

 

Regards,

Sowndharya Selladurai.

[Sowndharya Selladurai]

Hi Piotr,

ViewAnnotation can be used to add a custom view and button to line annotation, which makes dragging easier. For more information, refer to the attached document: https://help.syncfusion.com/xamarin/charts/chartannotation#view-annotation

We will be updating the sample on Monday, April 10, 2023. Thank you for your patience.

Regards,

Sowndharya Selladurai.

[Piotr]

Hi Sowndharya Selladurai,

thank you for your reply. It's interesting idea. Could you also verify second problem, with offset between line and finger position?

[Sowndharya Selladurai]

Hi Piotr,

 

I would like to inform you that we are currently validating whether the line is slightly offset from the finger query. Additionally, we have prepared a sample for annotating with a button. We will provide an update with the sample on Monday, April 10, 2023. Thank you for your patience.

 

Regards,

Sowndharya Selladurai.

[Sowndharya Selladurai]

Hi Piotr,

Regarding your initial query about catching the thin line, we resolved by using ChartBehavior support. With this support, we were able to capture the touch point on the chart and extend the annotation touch points using a rectangle. If the chart touch point contains the extended annotation touch point, we activate dragging, which allows us to easily drag the line.

Regarding your second query about the line being offset from the finger, we addressed in the VerticalLineMarker class by calculating the nearest point value in the OnTouchMove and OnTouchUp methods. During this calculation, we subtracted the series bounds left value from the pointX value, which resolved the offset problem.

In below attached the sample for reference. I hope this helps! Let us know if you need further clarifications.

Regards,

Sowndharya S.

Attachment: SfChartSample_(2)_7d45bf9.zip

[Piotr]

Hi Sowndharya Selladurai,

your solution works exactly as I expected. Thank you so much for your help!

[Preethi Rajakandham]

Hi Piotr,

Thank you for the update. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R