SfChart Y-Axis control alignment

[Mikolaj Kieres]

Hi,

I would like to ask how could I align some content with the y-axis of the chart? What I'm trying to achieve is (poorly) represented on the below screenshot.

Thanks in advance for any suggestions

Mikolaj

[Bharathiraja K]

Hi Mikolaj,  

  

Greetings from Syncfusion. You can add the content to Y-Axis using our annotation support. Please find the below help document link for more details. 

https://help.syncfusion.com/xamarin/sfchart/chartannotation  

 

To customize the Axis, please refer the below help document link. 

https://help.syncfusion.com/xamarin/sfchart/axis 

 

Please go through our help document guidelines and let us know if you need further assistance on this. 

  

Regards,  

Bharathiraja.  

[Mikolaj]

Hi Bharathiraja,

Thanks for your quick response. 

Unfortunately your suggestion is not going to work in this case, as there's much more than a label that needs to be under the chart and needs to be left aligned with the y-axis of the chart. I showed a label just as an example. Also, the content that needs to be aligned is not a part of the chart (it's placed under the chart).

My thinking was that I just need to get the x position of the y-axis on the screen, which would allow me to set margin on the content that needs to be aligned with it. Hopefully that clears things a bit and you could suggest some other approach?

Thanks

[Bharathiraja K]

Hi Mikolaj, 

 

We have analyzed your query and we can achieve your requirement using the chart Annotation and by setting the CoordinateUnit value as Pixels.  

 

Code Snippet [XAML]: 

<chart:SfChart.ChartAnnotations> 

                    <chart:TextAnnotation x:Name="textAnnotation" Text="Some Label"       

                                          CoordinateUnit="Pixels"> 

                        <chart:TextAnnotation.LabelStyle> 

                            <chart:ChartAnnotationLabelStyle   

                      HorizontalTextAlignment="End" VerticalTextAlignment="Center">                                                                                      

                            </chart:ChartAnnotationLabelStyle> 

                        </chart:TextAnnotation.LabelStyle> 

                    </chart:TextAnnotation> 

</chart:SfChart.ChartAnnotations> 

 

 

Code Snippet [C#]: 

private void SecondaryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 

{ 

            textAnnotation.Y1 = chart1.ValueToPoint(secondaryAxis,   

                                              (double)e.ActualMinimum)+ 80; 

} 

 

private void PrimaryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 

{ 

            textAnnotation.X1 = chart1.ValueToPoint(primaryAxis,   

                                              (double)e.ActualMinimum); 

} 

 

 

We have prepared a sample for your requirement and you can download the sample from the below link. 

Sample: http://www.syncfusion.com/downloads/support/forum/142825/ze/142825_Sample-1356219264.zip  

 

Please refer the below UG link for more details about positioning annotation based on CoordinateUnit as pixels:  

https://help.syncfusion.com/xamarin/sfchart/chartannotation#positioning-based-on-coordinateunit-as-pixels  

 

Label extent: 

https://help.syncfusion.com/xamarin/sfchart/axis#label-extent  

 

ActualRangeChanged:  

https://help.syncfusion.com/xamarin/sfchart/axis#event  

 

Query: I just need to get the x position of the y-axis on the screen, which would allow me to set margin on the content that needs to be aligned with it? 

 

We can able to get the screen position value using the ValueToPoint(ChartAxis axis, double value) method of the chart which converts data point value to screen point. 

 

Transform axis value to pixel value and vice-versa: 

https://help.syncfusion.com/xamarin/sfchart/how-to#transform-axis-value-to-pixel-value-and-vice-versa  

 

Please let us know if you need any further assistance. 

 

Regards, 

Bharathi.