ValueToPoint seems to give the wrong value

Question

See image below. I an trying to align the label "85%" which is outside the chart with the dashed line at 85%. Both the label and the chart are in a Grid and have the same top coordinate. In my code, I call ValueToPoint for 85 on the secondary axis to get the amount to offset for the label. However, it never aligns with the dashed line. When is the best time to call ValueToPoint?

Regards,

Arthur

Yuvaraj Palanisamy · Accepted Answer

Hi Arthur Butler, 
 
Thanks for your update. We have achieved your requirement “Annotation positioned wrongly when we change the orientation to Landscape” by update the ItemsSource property of ChartSeries. When we change the chart data collection the series rendered event will be fired. Now it’s working fine in both Portrait and Landscape mode.  
 
 





private void sfChart_SeriesRendered(object sender, EventArgs e) 
{ 
    if (sfChart.Series[0].ItemsSource != null) 
    { 
        sfChart.ChartAnnotations[0].X1 = sfChart.ValueToPoint(sfChart.PrimaryAxis, 10.5); 
        sfChart.ChartAnnotations[0].Y1 = sfChart.ValueToPoint(sfChart.SecondaryAxis, 5); 
    } 
} 
 
protected override void OnSizeAllocated(double width, double height) 
{ 
    base.OnSizeAllocated(width, height); 
    var data = lineSeries.ItemsSource; 
    lineSeries.ItemsSource = null; 
    lineSeries.ItemsSource = data; 
}  
 
Also, we have prepared the sample for your reference. Please find the sample from the below link. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/164016/ze/ChartSample_modified-36351310  
  
Regards, 
Yuvaraj.

Yuvaraj Palanisamy · Answer

Hi Arthur Butler, 
 
Greetings from Syncfusion. 
 
We have analyzed your query and we would like to suggest that to use ValueToPoint after the series rendered. In which, you can use ValueToPoint in the SeriesRendered event of SfChart for positioning the text. 
 
Also, we have prepared the sample for you reference. Please find the sample form the below link. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/164016/ze/ChartSample-1120202722  
  
For more information, please refer the below link. 
https://help.syncfusion.com/xamarin/charts/how-to/transform-axis-value-to-pixel-value-and-vice-versa  
 
Regards,  
Yuvaraj.

Arthur Butler · Answer

Thanks for the quick reply. This is not what I am trying to do. I am trying to align a label outside the graph with a point on the graph. I was thinking that ValueToPoint would give a screen coordinate but that seems to not be the case. See attached example where I have added this in sfChart_SeriesRendered.

Regards,

Arthur

Attachment: ChartSample_cd368e9f.zip

Yuvaraj Palanisamy · Answer

Hi Arthur Butler,

Thanks for providing the sample. And the ValueToPoint returning value supports the chart element alone. And also, you can achieved your requirement “Show the label outside the graph” with the help of ViewAnnotation with creating empty axis. Please find the code example below.

CodeSnippet:

<chart:SfChart.Axes>

<chart:NumericalAxis IsVisible="True" OpposedPosition="True" LabelExtent="200" IsVertical="True">

<chart:NumericalAxis.LabelStyle>

<chart:ChartAxisLabelStyle TextColor="Transparent" />

</chart:NumericalAxis.LabelStyle>

<chart:NumericalAxis.MinorTickStyle>

<chart:ChartAxisTickStyle StrokeWidth="0" StrokeColor="Transparent" TickSize="0"/>

</chart:NumericalAxis.MinorTickStyle>

<chart:NumericalAxis.AxisLineStyle>

<chart:ChartLineStyle StrokeColor="Transparent" />

</chart:NumericalAxis.AxisLineStyle>

</chart:NumericalAxis>

</chart:SfChart.Axes>

ViewAnnotation view = new ViewAnnotation();

view.View = new Label() { Text = "Hello"};

view.HorizontalAlignment = ChartAnnotationAlignment.End;

view.CoordinateUnit = ChartCoordinateUnit.Pixels;

sfChart.ChartAnnotations.Add(view);

private void sfChart_SeriesRendered(object sender, EventArgs e)

{

sfChart.ChartAnnotations[0].X1 = sfChart.ValueToPoint(sfChart.PrimaryAxis, 11);

sfChart.ChartAnnotations[0].Y1 = sfChart.ValueToPoint(sfChart.SecondaryAxis, 5);

}

Also, we have prepared the sample for your reference. Please find the sample from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/164016/ze/ChartSample2079133927

Regards,

Yuvaraj.

Arthur Butler · Answer

Thank you. This works fine until I switch from portrait to landscape on my phone. I tried to update the position of the annotation in OnSizeAllocated and sfChart_SizeChanged, but that did not work.

Any suggestions on how to get this to work when the phone screen is rotated back and forth?

Regards,

Arthur

Arthur Butler · Answer

Thank you.  This works well.

Yuvaraj Palanisamy · Answer

Hi Arthur Butler, 

Thanks for your update. We are glad to know the provided solution work at your end.please let us know if need any other assistance. 

Regards, 
Yuvaraj.