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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SecondaryAxis label override

Thread ID:

Created:

Updated:

Platform:

Replies:

141656 Dec 25,2018 06:48 PM UTC Dec 27,2018 03:47 AM UTC Xamarin.Forms 1
loading
Tags: SfChart
Jørgen
Asked On December 25, 2018 06:48 PM UTC

I'm trying to manipulate the secondary axis labels with the chart.SecondaryAxis.LabelCreated event. I only need to show one emoji at zero and one at the maximum.

That works fine in theory, but the chart control is skipping labels based on what fits in the screen and there seems no way to manipulate this (even if all the others are empty strings, it probably still displays them even tho they visually don't take space).

I tried EdgeLabelsVisibilityMode and EdgeLabelsDrawingMode but they seem not to have any effect. Maybe they are not for these labels or this functionality is not working.

Does anyone have an idea how I can hack a emoji in the top left of the chart?

Attached a screenshot of what I need.

Attachment: Screenshot_20181225_19.47.17.jpg_ac109259.zip

Michael Prabhu M [Syncfusion]
Replied On December 27, 2018 03:47 AM UTC

Hi Jorgen Teunis, 

Greetings from Syncfusion, we have analyzed your requirement to add an emoji in the axis label at position zero(minimum) and maximum. We can achieve your requirement using ViewAnnotation in the ChartAnnotation and ActualRangeChanged event of the SecondaryAxis

Please refer the below code snippet. 
CodeSnippet[XAML]: 
<chart:SfChart.ChartAnnotations> 
      <chart:ViewAnnotation x:Name="emoji1" CoordinateUnit="Pixels" X1="0" Y1="0" /> 
      <chart:ViewAnnotation x:Name="emoji2" CoordinateUnit="Pixels" X1="0" Y1="0"/> 
</chart:SfChart.ChartAnnotations> 

CodeSnippet[C#]: 
  Image image1 = new Image() { WidthRequest = 20, HeightRequest = 20 }; 
  image1.Source = "emoji1.png"; 
  image1.Aspect = Aspect.AspectFit; 
 
  Image image2 = new Image() { WidthRequest = 20, HeightRequest = 20 }; 
  image2.Source = "emoji.jpg"; 
  image2.Aspect = Aspect.AspectFit; 
 
  emoji1.View = image1; 
  emoji2.View = image2; 
 
private void SecondaryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 
{ 
            emoji1.X1 = 20; 
            emoji1.Y1 = Chart.ValueToPoint(sender as NumericalAxis, (double)e.ActualMinimum); 
 
            emoji2.X1 = 20; 
            emoji2.Y1 = Chart.ValueToPoint(sender as NumericalAxis, (double)e.ActualMaximum); 
} 
 
And we have prepared a sample for your requirement and you can download the sample from the below link. 
  
Sample: EmojiAxisLabel
 
 
Screenshot: 
 


Please refer the ug document for reference: 

Note: We have provided solution for Android and iOS in the sample above, for UWP please follow up on the incident created by you regarding this. 

Thanks, 
Michael  



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon