We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfChart Y-Axis control alignment

SfChart Y-Axis control alignment

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

3 Replies
BK Bharathiraja K Syncfusion Team February 21, 2019 06:44 AM UTC

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. 
 
To customize the Axis, please refer the below help document link. 
 
Please go through our help document guidelines and let us know if you need further assistance on this. 
  
Regards,  
Bharathiraja.  


MI Mikolaj February 21, 2019 10:45 AM UTC

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

BK Bharathiraja K Syncfusion Team February 22, 2019 11:17 AM UTC

 
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. 
 
Please refer the below UG link for more details about positioning annotation based on CoordinateUnit as pixels:  
 
Label extent: 
 
ActualRangeChanged:  
 
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: 
 
Please let us know if you need any further assistance. 
 
Regards, 
Bharathi. 


Loader.
Up arrow icon