Incorrect ChartSF.ValueToPoint

[Rodrigo Avots Soares]

Hi, i need help!

I get the top 5 peaks on the chart. Clicking on the item shows the tooltip.

When items are close together, it appears incorrect

Code:

float chartPointX = (float)ChartSF.ValueToPoint(ChartSF.PrimaryAxis, item.ValueX);

float chartPointY = (float)ChartSF.ValueToPoint(ChartSF.SecondaryAxis, item.ValueY);

tooltipBehavior.Show(chartPointX, chartPointY, true);

[Yuvaraj Palanisamy]

Hi Rodrigo,  

  

Greetings from Syncfusion.  

  

We have analyzed your query and we have already fixed the similar issue, the fix has been included in our Volume 2, 2021 release 19.2.0.44. Colud you please update the Syncfusion package version to latest (version 19.2.0.46) and please let us know if your reported problem resolved or not.   

  

Regards,  

Yuvaraj. 

[Rodrigo Avots Soares]

Hi!

I'm using the latest version and the problem remains.

[Yuvaraj Palanisamy]

Hi Rodrigo, 

 

Currently we are validating the reported problem “SfChart ValueToPoint returns incorrect value” and we will update you with complete details on or before 13^th July 2021. We appreciate your patience until then.  

 

Regards, 

Yuvaraj. 

[Yuvaraj Palanisamy]

Hi Rodrigo, 

 

We have forwarded this query to development team. Due to complexity, we need some more time to validating this and we will update you with complete details on or before 16th July 2021. Also, could you please confirm the platform you are facing the reported problem. We appreciate your patience until then. 

Regards, 

Yuvaraj.

[Rodrigo Avots Soares]

Hi!

I'm currently only using Xamarin Forms on Android.

In iOs will be developing in the near future.

[Yuvaraj Palanisamy]

Hi Rodrigo, 

 

On further validating the reported issue, we would like to let you know that the actual behavior of the tooltip rendering in LineSeries is to show the tooltip on data points when we touch nearest datapoint to form the rectangle region.

And In our scenario, when we use Show() of Tooltip behavior the rectangle region bounds the nearest datapoint due to more number of datapoints bounds in the rectangle region. Hence, the problem raised. Also, we are considering the feature request for to pass the datapoint for showing the tooltip instead of the position. And we share the feature request detail on 19^th July 2021. 

 

Also, we are trying to achieve your requirement by workaround, and we need some more time to implement the workaround. We will provide the complete details on or before 19^th July 2021. 

 

Regards, 

Yuvaraj. 

[Yuvaraj Palanisamy]

Hi Rodrigo, 

 

Thanks for your patience. 

 

By default, to find the tootip segment by 20 pixel before and after the exact position for line and area type series. Because we can’t not touch at exact pixel point by interaction. For this scenario, we need to get the exact point to render the tooltip. Hence, we can achieve your requirement by workaround in specific project with the help of CustomRenerer. Please find the code example below. 

 

CodeSnippet: 

Android Project 

public class CustomLineSeries : Native.LineSeries 

{ 

     

    public CustomLineSeries() 

    { 

    } 

 

    int i = 0; 

    protected override Native.ChartSegment CreateSegment() 

    { 

        var segemnt = new CustomLineSegment(); 

        i++; 

        return segemnt; 

    } 

} 

 

public class CustomLineSegment : Native.LineSegment 

{        

    public CustomLineSegment() 

    { 

    } 

 

    protected override int HitTest(float valueX, float valueY) 

    { 

        if (IsRectContains(X1, Y1, valueX, valueY, Series.StrokeWidth)) 

        { 

            return Series.Segments.IndexOf(this); 

        } 

        else if (Series.Segments.IndexOf(this) == Series.Segments.Count - 1 && IsRectContains(X2, Y2, valueX, valueY, Series.StrokeWidth)) 

        { 

            return Series.Segments.IndexOf(this) + 1; 

        } 

        else 

        { 

            return -1; 

        } 

    } 

 

    internal static bool IsRectContains(float xPoint, float yPoint, float valueX, float valueY, float strokeWidth) 

    { 

        // here we find the position from 3pixel before and after the exact position  

        float depth = ((strokeWidth < 3) ? 3 : strokeWidth) * CustomChart.Density; 

        float x1 = xPoint - depth; 

        float y1 = yPoint - depth; 

        float x2 = xPoint + depth; 

        float y2 = yPoint + depth; 

        return x1 < valueX && valueX < x2 && y1 < valueY && valueY < y2; 

    } 

} 

 

 

MainPage.xaml 

<local:ChartExt VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="chart"> 

 

. . .   

 

    <chart:SfChart.Series> 

        <local:LineSeriesExt x:Name="series"   

                             EnableTooltip="True" 

                             ItemsSource="{Binding Data}"  

                             XBindingPath="XValue"  

                             YBindingPath="YValue"/> 

    </chart:SfChart.Series> 

 

    <local:ChartExt.ChartBehaviors> 

        <chart:ChartTooltipBehavior x:Name="tooltip"/> 

    </local:ChartExt.ChartBehaviors> 

 

</local:ChartExt > 

 

We have attached the complete sample for your reference. Please find the sample from the below link.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/167021/ze/ChartSample-599338682  

  

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj.